:root{
  --f2-accent: #dc3545; /* brand red */
}

html, body { height: 100%; }

body{
  font-family: 'Roboto', Arial, sans-serif;
  scroll-behavior: smooth;
  color: var(--bs-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip link (a11y) */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--bs-dark);
  color: var(--bs-white);
  z-index: 1050;
  border-radius: 0.25rem;
}

/* Navbar - transparent at top, .scrolled adds background */
.navbar{
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.navbar.fixed-top{ background-color: transparent; }
.navbar .navbar-brand, .navbar .nav-link{ color: var(--bs-white); }
.navbar .navbar-toggler{ border-color: rgba(255,255,255,0.2); }
.navbar .navbar-toggler-icon{ filter: invert(1) brightness(2); }

.navbar.scrolled{
  background-color: rgba(33,37,41,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.navbar.scrolled .navbar-brand, .navbar.scrolled .nav-link{ color: var(--bs-white); }

/* Hero */
.hero{
  position: relative;
  background-image: url('../img/banner.jpg');
  background-size: cover;
  background-position: center center;
  min-height: 72vh;
  display: flex;
  align-items: center;
  color: var(--bs-white);
  opacity: 0.95;
}
.hero-overlay{ position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); z-index: 1; }
.hero .hero-inner{
  position: relative; z-index: 2; padding: 2rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0.5rem;
}
.hero .hero-inner .lead{ max-width:70ch; margin-left:auto; margin-right:auto; padding-inline:1rem; }
@media (min-width:1400px){ .hero .hero-inner .lead{ max-width:80ch; letter-spacing:0.1rem; font-weight:500; } }
.hero-cats{ text-transform:uppercase; letter-spacing:0.2rem; color: rgba(255,255,255,0.9); font-weight:200; margin:0; }
@media (max-width:768px){ .hero{ min-height:48vh; } .hero .hero-inner{ padding:2rem 0.5rem; } .hero h1{ font-size:2rem; } }

/* Banner helpers */
.banner{ position: relative; height:72vh; overflow:hidden; }
@media (max-width:576px){ .banner{ height:48vh; } .card img{ height:160px; } }
.banner img, .banner .card-img{ width:100%; height:100%; object-fit:cover; }

/* Cards */
.card img{ height:220px; object-fit:cover; }

footer{ border-top:1px solid rgba(0,0,0,0.06); }

.segment-card{ border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.04); position:relative; overflow:hidden; }
.segment-card:not(.bg-light){ background-color: rgba(231,231,231,0.55); }
.segment-card .segment-media img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.segment-card h3{ margin-top:0.5rem; }
.segment-card a{ color:#111827; }
.segment-card .stretched-link::after{ display:none; }

.eb-card{ box-shadow:0 6px 18px rgba(0,0,0,0.08); min-height:120px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
@media (max-width:576px){ .eb-card{ flex:1 1 100%; min-width:auto; } }

/* Arapark badge overlay */
.arapark-media{ position: relative; }
.arapark-media img{ display:block; width:100%; height:auto; }
/* video inside arapark block should behave like images */
.arapark-media video{ display:block; width:100%; height:auto; max-height:480px; object-fit:cover; }
.arapark-badge{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(70%);
  transition: transform 1300ms cubic-bezier(.2,.9,.2,1), opacity 300ms;
  /* ensure the badge stays visually above carousel slides during fade/transform */
  z-index: 9999;
  will-change: transform, opacity;
  background: rgba(220, 53, 69, 0.72); /* vermelho opacidade */
  color: #fff;
  padding: 0.5rem 1rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0;
}
.arapark-media.show-badge .arapark-badge{ transform: translateY(0%); opacity: 0.98; }

/* video end overlay (hidden until video ends) */
.video-end-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); opacity:0; pointer-events:none; transition: opacity 240ms ease;
}
.video-end-overlay .overlay-inner{ padding:1.5rem; }
.arapark-media.show-video-overlay .video-end-overlay{ opacity:1; pointer-events:auto; }

/* Ensure carousel slides inside the arapark block don't create a higher stacking context */
.arapark-media .carousel,
.arapark-media .carousel-inner,
.arapark-media .carousel-item{
  z-index: 0;
}
.arapark-media .carousel-item.active{
  z-index: 1;
}

/* Smooth fade for carousel images */
.carousel-fade .carousel-item{
  transition: opacity 500ms ease-in-out;
}
.carousel-fade .carousel-item img{ backface-visibility: hidden; }