@charset "utf-8";
/* CSS Document */

font-face {
  font-family: "Helvetica Neue Local";
  src:
    local("HelveticaNeue"),
    local("Helvetica Neue"),
    local("Helvetica");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-face {
  font-family: "Helvetica Neue Local";
  src:
    local("HelveticaNeue"),
    local("Helvetica Neue"),
    local("Helvetica");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
	--font-sans: "Helvetica Neue Local", Inter, -apple-system, BlinkMacSystemFont,
				"Segoe UI", Roboto, "Noto Sans", Arial, "Apple Color Emoji",
				"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
	--font-size-base: 1rem;    /* 16px */
	--line-height-base: 1.6;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/* --green2: #d3ff00; */
	
	--green: #1f6153;
	--green2: #0C2721;
	--green3: #154339;
	--green4: #1E5F51;
	--green5: #287966;
	--green6: #31957E;
	--green7: #3AB195;
	--green8: #44CDAD;

	--green-canetao: #C6FF41;

}

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	font-weight: var(--font-weight-regular);
	scroll-behavior: smooth;
}

a {
	color: var(--green6);
}

a:hover,
a:checked {
	color: var(--green);
}

.bg-green2{
	background-color: var(--green2);
}

section {
	padding: 50px 20px;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--green);
	margin-top: 0;
	margin-bottom: .5em;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }      /* ~32 → 48px */
h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

h2.title {
	position: relative;
}

.bg-green2 :is(h1,h2,h3,h4,h5,h6) {
	color: #fff;
}

/* h2.title::after {
    content: '';
    width: 100%;
    height: 10px;
    background: url(../img/2026/trama.svg);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: -10px;
    left: 0;
} */


h2.title::after {
  content: '';
  width: 100%;
  height: 10px;

  /* COR DO SVG */
  background-color: var(--green);

  /* SVG vira máscara */
  -webkit-mask-image: url(../img/2026/trama.svg);
          mask-image: url(../img/2026/trama.svg);

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;

  -webkit-mask-position: center;
          mask-position: center;

  -webkit-mask-size: 100px;
          mask-size: 100px;

  position: absolute;
  bottom: -10px;
  left: 0;
}

.bg-green2 h2.title::after {
	background-color: #ffffff;
}

.navbar.navbar-transparent {
	background: transparent !important;
	border-bottom: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.navbar.navbar-solid {
	background-color: var(--green) !important;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	backdrop-filter: saturate(180%) blur(6px);
	box-shadow: 0 8px 16px rgba(2,8,20,0.06);
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.navbar .navbar-toggler
.navbar-toggler-icon {
	background-size: 100% 100%;
}

.navbar-dark
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	/* background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(11,15,25,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); */
}

.navbar-collapse .navbar-nav {
	height: 100vh;
}

.navbar-collapse .nav-item {
	margin-top: 20px;
}

.brand-mask {
  display: inline-block;
  width: 150px;
  background-color: #fff; /* vira a cor do logo */
  -webkit-mask: url('../img/2026/brand.svg') no-repeat center / contain;
          mask: url('../img/2026/brand.svg') no-repeat center / contain;
}

.nav-link {
	font-weight: bold;
	font-style: italic;
}

.nav-link:hover {
	color: #fff;
	text-decoration: underline;
}

.nav-link,
.navbar-distances {
	color: #FFF;
}

.navbar-center {
    position: static;
	transform: none;
	translate: 0;
    margin-left: auto;
	margin-right: auto;
}

.navbar-left, .navbar-right {
	min-width: 0;
}

.navbar-left {
	min-width: 33%;
}

.navbar-layout {
	justify-content: space-between;
}

.distance-badge {
	margin-right: 10px;
}

.btn-px{
	border-radius: 50px 0px;
    padding: 10px 50px;
}

.btn-white {
	color: var(--green);
	background-color: #fff;
	border: 1px solid var(--green);
}

.btn-white:hover {
	color: #fff;
	background-color: var(--green);
	border: 1px solid #fff;
}

.btn-green {
	color: #1f6153;
  background-color: #1ae5b5;
  border: transparent;
  font-weight: bold;
  font-style: italic;
}

.btn-green:hover {
	color: #1f6153;
  background-color: #ffffff;
}

#banner {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	color: #fff;
	background: #0b0f19;
	isolation: isolate;
	overflow: clip;
}

#banner picture,
#banner
.banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

#banner .banner-bg {
	object-fit: cover;
	object-position: top center;
	z-index: 0;
}

.info-strip {
	min-height: 15vh;
	display: flex;
	align-items: center;
	border-top: 1px solid rgba(255,255,255,0.12);
	border-bottom: 1px solid rgba(0,0,0,0.06);
	background-color: var(--green);
}

#regulamento {
	background-color: #f3f3f3;
}

/* Estética dos conteúdos da faixa */
.info-strip
.strip-item
.label {
	letter-spacing: .2px;
}

.balaoContainer{
	width: 100%;
	margin: auto;
	z-index: 998;
	position: relative;
}

.balaoInfo{
	background: var(--green);
    color: #fff;
    font-weight: bold;
    text-align: left;
    padding: 20px 30px;
    width: 255px;
    border-radius: 20px;
	margin-bottom: 5px;
	/* width:220px;
    position: absolute;
    z-index: 901;
    top: -100px;
    left: 30px; */
}

.balaoInfo:after{
	content: "";
	position: absolute;
	bottom: -15px;
	left: 18px;
	border-width: 15px 15px 0;
    border-style: solid;
    border-color:  var(--green) transparent;
    display: block;
    width: 0;
}


/* ===== KIT ATLETA ===== */
.kit-section {
  color: #000;
  background: #fff;
}

.card-base {
  background: #fff;
  border: 1px solid var(--green);
  border-radius: .75rem;
}

/* ===== Imagem principal ===== */
.kit-main-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: .5rem;
  overflow: hidden;
}
.kit-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.kit-thumbs {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 992px) {
  .kit-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

/* Botão de miniatura */
.kit-thumb {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;

  width: 110px;
  height: 140px;
  margin: 0 auto;

  /* border-radius: .75rem; */
  border-radius: 30px 0px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(2,8,20,.06);

  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease;
  outline: none;
}

.kit-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2,8,20,.12);
}

.kit-thumb.is-active {
  border-color: var(--green);
}

.kit-thumb img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  object-position: center;
  margin-top: 10px;
}

.kit-thumb-label {
  display: block;
  font-size: .875rem;
  color: var(--green);
  padding: 4px 6px 8px;
  text-align: center;
}

/* Acessibilidade: foco visível via teclado */
.kit-thumb:focus-visible {
  box-shadow: 0 0 0 3px rgba(13,110,253,.25);
  border-color: #0d6efd;
}

/* Mantém o seu bloco base */
#medalhas {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('../img/2026/bg_medalha.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0;    /* necessário para parallax JS */
  isolation: isolate;
  will-change: background-position; /* dica p/ performance */
}

#medalhas .container { position: relative; z-index: 1; }

.medalhas-heading {
  line-height: 1.1;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  font-style: italic;
}

/* figure/imagem (mantive o que você já tem) */
.medalhas-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4;
}
.medalhas-figure > img {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

@media (max-width: 575.98px) {
  .medalhas-heading { font-size: clamp(1.75rem, 1.2rem + 3.2vw, 3rem); }
}

/* Respeita redução de movimento */
@media (prefers-reduced-motion: reduce) {
  #medalhas { background-position: center 0 !important; }
}


#footer {
	background-color: var(--green);
	color: #fff;
}

#footer a,
#footer a:hover,
#footer a:active {
	color: #fff;
}

@media (max-width: 575.98px) {
  .medalhas-heading {
    font-size: clamp(1.75rem, 1.2rem + 3.2vw, 3rem);
  }
}

/* Respeito a preferências do usuário */
@media (prefers-reduced-motion: reduce) {
  .medalhas-figure,
  .medalhas-heading {
    transition: none !important;
  }
}

#patrocinio {
	background-color: var(--green7);
}

#patrocinio .brand-logo-40 { max-height: 40px; width: auto; }
#patrocinio .brand-logo-30 { max-height: 30px; width: auto; }


#edicoes i {
	font-size: 40px;
}

#edicoes a{
	text-decoration: none;
	transition: background-color 0.5s ease;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


@media only screen and (max-width: 767px) {
	.navbar-center {
		margin-left: initial;
		margin-right: initial;
	}

	.navbar.navbar-transparent {
		background: var(--green) !important;
	}

	.navbar-toggler:focus {
		box-shadow: none;
	}
}