/* =========================================================
   TransLusitano VTC — CSS COMPLETO
   - Look "print": madeira + dourado + botão vermelho
   - Full screen (sem bordas brancas)
   - Fundo com imagem desfocada (opção 1)
   - HERO em banner centrado (para usar imagem retangular)
   Bootstrap 5 + Bootstrap Icons
========================================================= */

:root{
  /* cores base */
  --ink:#141821;
  --muted: rgba(0,0,0,.62);

  /* madeira nav */
  --wood1:#1f160f;
  --wood2:#3a281b;
  --wood3:#24180f;

  /* dourado */
  --gold1:#fff3c6;
  --gold2:#d8b25a;
  --gold3:#8a5b1b;

  /* CTA */
  --cta:#b11212;
  --cta2:#7e0c0c;

  /* cards */
  --card1:#ffffff;
  --card2:#eef1f5;

  /* sombras */
  --shadowHero: 0 18px 45px rgba(0,0,0,.42);
  --shadowCard: 0 8px 18px rgba(0,0,0,.14);

  /* raio */
  --r: 12px;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

  /* fallback se não existir bg_blur.png */
  background: #0b0d10;
  overflow-x: hidden;
  position: relative;
}

/* ===================== FUNDO (OPÇÃO 1) =====================
   Mete a tua imagem aqui: assets/img/bg_blur.png
   (como o CSS está em assets/css, o caminho é ../img/...)
========================================================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("../img/bg_blur.png") center/cover no-repeat;
  filter: blur(14px) saturate(1.05) brightness(1.18) contrast(1.02);
  transform: scale(1.08);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 520px at 20% 15%, rgba(255,210,140,.30), transparent 62%),
    radial-gradient(1000px 520px at 80% 25%, rgba(150,200,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
}

/* container do bootstrap (largura) */
.container{ max-width: 1200px; }

/* ===================== NAVBAR (madeira) ===================== */
.navbar-vtc{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)),
    linear-gradient(90deg, var(--wood1), var(--wood2), var(--wood3));
  border-bottom: 1px solid rgba(255,255,255,.16);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-vtc .navbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand-shield{
  width:34px;height:34px;
  border-radius:10px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.32), transparent 45%),
    linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold3));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.brand-title{
  font-family:"Cinzel", serif;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.15rem;
  background: linear-gradient(180deg, #fff6cc, var(--gold2), #fff3b8);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

.brand-sub{
  display:block;
  margin-top: 2px;
  font-size: .78rem;
  letter-spacing: .65px;
  color: rgba(255,255,255,.75);
  font-weight: 800;
  text-transform: uppercase;
}

.navbar-vtc .nav-link{
  color: rgba(255,255,255,.78) !important;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: .86rem;
  padding: .95rem .85rem;
}

.navbar-vtc .nav-link:hover,
.navbar-vtc .nav-link.active{
  color:#fff !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.35);
}

/* ===================== BOTÕES ===================== */
.btn-cta{
  background: linear-gradient(180deg, #d21b1b, var(--cta));
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight: 950;
  letter-spacing:.8px;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 16px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-cta:hover{
  background: linear-gradient(180deg, #e02424, var(--cta2));
  transform: translateY(-1px);
  color:#fff;
}

.btn-ghost{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight: 950;
  letter-spacing:.7px;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 12px 18px;
}
.btn-ghost:hover{ background: rgba(255,255,255,.20); color:#fff; }

/* ===================== HERO HOME =====================
   Importante: aqui o hero usa a IMAGEM CENTRAL (retangular)
   chamada hero_truck.png, como no teu caso.
========================================================= */
.hero-vtc{
  position: relative;
  min-height: 660px;
  padding: 0;
}

.hero-inner{
  /* FIX layout: tudo centrado e não absoluto */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 34px;
  min-height: 660px;
}

.hero-top{
  text-align:center;
  color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.logo-big{
  font-family:"Cinzel", serif;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  margin: 0;
  background: linear-gradient(180deg, #fff6cc, var(--gold2), #fff3b8);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.logo-sub{
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  margin-top: 6px;
  font-size: .95rem;
}

.hero-slogan{
  margin-top: 14px;
  font-weight: 950;
  font-size: 1.05rem;
  color: rgba(255,255,255,.92);
}

/* A tua imagem central (banner) */
.hero-truck{
  position: static !important;
  display:block;
  width: min(980px, 92vw);
  height: auto;
  margin: 40px auto 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadowHero);
}

/* botão por baixo */
.hero-cta{
  position: static !important;
  transform: none !important;
  margin-top: 16px;
  width: auto;
  padding: 0;
  text-align: center;
}

.btn-cta-xl{
  padding: 14px 30px;
  font-size: 1.08rem;
  border-radius: 10px;
}

/* pills dos ícones */
.hero-features{
  position: static !important;
  transform: none !important;
  margin-top: 14px;
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  justify-content:center;
  padding: 10px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color:#fff;
  font-weight: 950;
}

.hf-item{
  display:flex;
  align-items:center;
  gap: 10px;
  letter-spacing:.2px;
  font-size: .92rem;
}

.hf-ico{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
.hf-ico i{ font-size: 1.05rem; }

/* ===================== HERO DAS PÁGINAS INTERNAS ===================== */
.page-hero{
  position: relative;
  padding: 48px 0 22px;
  margin-top: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.page-hero h1{
  text-align:center;
  font-weight: 950;
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin: 0;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.page-hero .lead{
  text-align:center;
  color: rgba(255,255,255,.72);
  font-weight: 750;
  margin-top: 10px;
}

/* ===================== SECTIONS (faixa clara como na print) ===================== */
.section{
  padding: 50px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.55));
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.section-title{
  text-align:center;
  font-weight: 950;
  letter-spacing:.3px;
  margin-bottom: 14px;
  color: #141821;
}

.section-title::after{
  content:"";
  display:block;
  width: 90px;
  height: 4px;
  border-radius: 999px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--cta), transparent);
}

.section-sub{
  text-align:center;
  color: rgba(0,0,0,.62);
  font-weight: 750;
  margin-bottom: 26px;
}

/* ===================== CARDS (imagem + título) ===================== */
.card-soft{
  background: linear-gradient(180deg, var(--card1), var(--card2));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  box-shadow: var(--shadowCard);
  overflow:hidden;
}

.thumb{
  width:100%;
  height: 190px;
  object-fit: cover;
}

/* título sobre a imagem */
.card-img-title{ position: relative; }
.card-img-title .thumb{ height: 190px; }

.card-img-title .img-title{
  position:absolute;
  left: 10px;
  top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight: 950;
  letter-spacing:.3px;
}

.text-muted{
  color: var(--muted) !important;
}

/* ===================== EVENTOS (banner EM BREVE) ===================== */
.event-banner{
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.25)),
    url("../img/event_banner.png") center/cover no-repeat;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--shadowCard);
  overflow:hidden;
  color:#fff;
  min-height: 210px;
  display:flex;
  align-items:center;
  padding: 22px;
}

.badge-soon{
  display:inline-block;
  background: linear-gradient(180deg, #ff3b3b, #b11212);
  color:#fff;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .9px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

/* ===================== RECRUTAMENTO (3 painéis escuros) ===================== */
.panel-dark{
  background: linear-gradient(180deg, #2a2f3a, #151a23);
  color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadowCard);
  padding: 18px;
  height:100%;
}

.panel-dark h5{
  font-weight: 950;
  letter-spacing: .4px;
  margin-bottom: 12px;
}

.panel-dark ul,
.panel-dark ol{
  margin:0;
  padding-left: 18px;
  color: rgba(255,255,255,.90);
  font-weight: 800;
}
.panel-dark li{ margin: 7px 0; }

.big-cta{
  margin-top: 26px;
  text-align:center;
}
.big-cta .btn-cta{
  padding: 14px 28px;
  font-size: 1.06rem;
}

/* ===================== GALERIA ===================== */
.gallery-btn{
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing:.6px;
}

.g-item{
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.g-item:hover{ transform: translateY(-2px); }
.hidden{ display:none !important; }

/* ===================== FOOTER ===================== */
.footer{
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 18px 0;
  text-align:center;
  color: rgba(255,255,255,.70);
  font-weight: 750;
}

.logo-big{
  text-shadow:
    0 6px 26px rgba(0,0,0,.70),
    0 2px 0 rgba(0,0,0,.55);
  -webkit-text-stroke: 1.2px rgba(0,0,0,.45);
}

.logo-sub,
.hero-slogan{
  color: rgba(255,255,255,.96);
  text-shadow: 0 4px 18px rgba(0,0,0,.70);
}

/* Melhorar legibilidade do subtítulo e slogan */
.logo-sub,
.hero-slogan{
  color: rgba(255,255,255,.98) !important;
  font-weight: 950;
  text-shadow:
    0 3px 12px rgba(0,0,0,.75),
    0 1px 0 rgba(0,0,0,.65);
  -webkit-text-stroke: 0.8px rgba(0,0,0,.45);
}

/* Um bocadinho menos "blur" no texto */
.logo-sub{ letter-spacing: .8px; }
.hero-slogan{ font-size: 1.05rem; }

.hero-features{
  background: rgba(10,12,16,.55) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  color: rgba(255,255,255,.95);
}

.hf-item{
  font-weight: 950;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.brand-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 0;
  transform: scale(1.18);
  transform-origin: center;
}

.navbar-brand{ gap: 10px; }
.brand-logo{ margin-top: -1px; }


/* ===== PAGE HERO: melhor contraste ===== */
.page-hero{
  position: relative;
  overflow: hidden;
}

/* escurece só atrás do texto */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
}

/* título */
.page-hero h1{
  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 6px 22px rgba(0,0,0,.65);
  -webkit-text-stroke: 1px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;
}

/* subtítulo */
.page-hero .lead{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.65);
  -webkit-text-stroke: .7px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;
}

/* Tira a barra/gap entre a navbar e o page hero */
.page-hero{
  margin-top: 0 !important;      /* remove o espaço */
  border-top: 0 !important;      /* remove a linha de cima */
  padding-top: 42px;             /* mantém espaço interno para o título */
}

/* (Opcional) dá separação bonita sem barra */
.navbar-vtc{
  box-shadow: 0 10px 25px rgba(0,0,0,.30);
}

/* Botões extra do recrutamento mais visíveis */
.cta-secondary{
  background: rgba(0,0,0,.40) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cta-secondary:hover{
  background: rgba(0,0,0,.55) !important;
  border-color: rgba(255,255,255,.40) !important;
  transform: translateY(-1px);
}

/* Sticky footer: faz o rodapé ficar em baixo em ecrãs grandes */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;   /* ocupa o espaço que falta */
}

footer.footer{
  margin-top: auto; /* empurra o rodapé para baixo */
}

/* O espaço extra do main fica com o mesmo fundo "clean" */
.main-wrap{
  flex: 1 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.55));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Como o fundo já está no main, tira-o das sections dentro dele */
.main-wrap .section{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* ===================== RESPONSIVO ===================== */
@media (max-width: 991px){
  .hero-inner{ padding-top: 44px; }
  .hero-features{
    border-radius: 18px;
    padding: 12px 14px;
  }
  .hf-item{ font-size: .9rem; }
}