@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  background-color: #000;
  scroll-behavior: smooth;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0 auto;

}

.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url("assets/Header.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.container-video {
  width: 80%;
  margin: 0 auto;
  margin: 6REM auto;
}

.container-register {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  flex-direction: column;
  margin: 5rem 0;
  gap: 20px;
}

.container-register h1 {
  color: #fff;
  text-align: center;
  font-family: Anton;
  font-size: 45.116px;
  font-style: normal;
  font-weight: 400;
  line-height: 46.259px;
  /* 102.533% */
  text-transform: uppercase;
}

.container-register span {
  color: #f3c65f;
}

.container-register a {
  width: 457.218px;
  height: 70.024px;
  flex-shrink: 0;
  background-image: url("assets/BACKGROUND-BUTTON.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #572813;
  text-align: center;
  font-family: "Bebas Neue";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.play-button-video:hover {
  background: white;
  transform: translateX(-50%) scale(1.1);
}

.play-button-video::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

.container-oktuber {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: left;
  background-color: transparent;
}

.image {
  width: 100%;
  background-image: url("assets/OktuberFest.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: CENTER;
  flex-direction: column;
  height: 100vh;
  padding: 0 10rem;
  justify-content: center;
  align-items: left;
  display: flex;
}

.container-oktuber H1 {
  color: #fff;
  font-family: Anton;
  font-size: 57px;
  font-style: normal;
  font-weight: 400;
  line-height: 58.444px;
  text-transform: uppercase;
}

.container-oktuber H2 {
  color: #fff;
  font-family: Anton;
  font-size: 24.492px;
  font-style: normal;
  font-weight: 400;
  line-height: 90px;
  /* 367.473% */
  text-transform: uppercase;
}

.container-oktuber SPAN {
  color: #f3c65f;
}

.container-oktuber p {
  color: #fff;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
}

.container-rodada {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  flex-direction: column;
  padding: 4rem;
  gap: 20px;
}

.container-rodada h1 {
  color: #fff;
  text-align: center;
  font-family: Anton;
  font-size: 45.116px;
  font-style: normal;
  font-weight: 400;
  line-height: 46.259px;
  /* 102.533% */
  text-transform: uppercase;
}

.container-rodada span {
  color: #f3c65f;
}

.container-rodada a {
  width: 457.218px;
  height: 70.024px;
  flex-shrink: 0;
  background-image: url("assets/BACKGROUND-BUTTON.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #572813;
  text-align: center;
  font-family: "Bebas Neue";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.container-brinde {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0 2rem 2rem;
  /* espaço para o card “encostar” no rodapé */
  display: flex;
  align-items: flex-end;
  /* card fica embaixo */
  background: transparent url("assets/chop.webp") top center / cover no-repeat;
  overflow: hidden;
}

/* gradiente para transição da imagem para o preto (melhora leitura) */
.container-brinde::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(21, 21, 21, 0) 40%,
      rgba(21, 21, 21, 1) 85%);
  pointer-events: none;
}

/* Card de conteúdo */
.brinde-card {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: Epilogue, system-ui, sans-serif;
}

.brinde-card h2 {
  color: #fff;
  font-family: Anton;
  font-size: 59.852px;
  font-style: normal;
  font-weight: 400;
  line-height: 61.368px;
  /* 102.533% */
  text-transform: uppercase;
}

.brinde-card h2 span {
  color: #f3c65f;
}

.cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  margin-top: 20px;
}

.qrcode {
  width: 20%;
  margin: 0 auto;
  height: 100%;

}

.col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.col p {
  margin: 0 0 0.75rem;
  color: #fff;
  font-family: Epilogue;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 23px;
  /* 127.778% */
}

.steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-family: "Epilogue";
}

.steps li::before {
  content: counter(step);
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 30%;
  background: transparent;
  border: 2px solid #f3c65f;
  color: #ffffff;
  font-weight: 700;
}

.steps {
  counter-reset: step;
}

.brinde-card .footer {
  margin-top: 2rem;
  color: #fff;
  text-align: center;
  font-family: "Bebas Neue";
  font-size: 26.904px;
  font-style: normal;
  font-weight: 400;
  line-height: 27.585px;
  /* 102.533% */
  text-transform: uppercase;
}

/* Seção */
.container-bares {
  color: #fff;
  padding: 56px 0 72px;
  font-family: Epilogue, system-ui, sans-serif;
}

.bares-inner {
  width: min(1200px, 100% - 3rem);
  margin: 0 auto;
}

/* Título */
.bares-title {
  color: #fff;
  text-align: center;
  font-family: Anton;
  font-size: 59.85px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  /* 102.59% */
  text-transform: uppercase;
}

.bares-title .line-1 {
  display: block;
  font-size: clamp(28px, 6vw, 64px);
}

.bares-title .line-2 {
  display: block;
  font-size: clamp(28px, 6vw, 64px);
  color: #f3c65f;
  margin-top: 0.2em;
}

/* Select */
.select-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 18px 0 28px;
}

.select-wrap select {
  appearance: none;
  border: none;
  border-radius: 10px;
  background: #f3c65f;
  color: transparent;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 42px 14px 16px;
  cursor: pointer;
  color: #000;
  font-family: Ubuntu;
  font-size: 20.857px;
  font-style: normal;
  font-weight: 700;
  line-height: 26.071px;
  /* 125% */
  margin-top: 20px;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "▾";
  position: absolute;
  right: calc(50% - 180px);
  /* alinha com o select (ajuste se mudar largura) */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: transparent;
}

/* Grid de cards */
.bares-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 10px;
}

.bar-card {
  background: #fff;
  color: #1b1b1b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.bar-card h3 {
  margin: 18px;
  font-weight: 700;
  font-size: 18px;
  color: #1b1b1b;
}

.bar-card img {
  width: 100%;
  object-fit: cover;
  display: block;
  height: 220px;
}

.card-body {
  padding: 18px;
  font-size: 14px;
}

.addr {
  margin: 2px 0 6px;
  color: #3a3a3a;
}

.hours {
  margin: 0 0 10px;
  color: #3a3a3a;
}

.maps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #1b1b1b;
  text-decoration: none;
}

.maps svg {
  width: 18px;
  height: 18px;
  fill: #1b1b1b;
}

/* CTA */
.bares-cta {
  text-align: center;
  margin-top: 42px;
}

.cta-text {
  font-family: Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.15;
  font-size: clamp(18px, 3.2vw, 28px);
  margin: 0 0 18px;
}

.cta-text span {
  color: #f3c65f;
}

.cta-btn {
  width: 457.218px;
  height: 70.024px;
  flex-shrink: 0;
  background-image: url("assets/BACKGROUND-BUTTON.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #572813;
  text-align: center;
  font-family: "Bebas Neue";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  margin: 0 auto;
}

/* Responsivo */
@media (max-width: 1024px) {
  .bares-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .select-wrap::after {
    right: calc(50% - 150px);
  }
}

@media (max-width: 640px) {
  .bares-grid {
    grid-template-columns: 1fr;
  }

  .select-wrap::after {
    right: calc(50% - 120px);
  }
}

.campanha {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  /* empurra o conteúdo para a direita */
  align-items: center;
  padding: 2rem 8rem;
  background: transparent url("assets/anos.webp") left center / auto 88% no-repeat;
  /* se quiser a arte maior: troque auto 88% por cover */
}

/* leve gradiente para leitura do texto (opcional) */
.campanha::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.65) 85%);
  pointer-events: none;
}

.campanha-copy {
  position: relative;
  z-index: 1;
  width: min(640px, 46%);
  /* só ocupa a “metade” direita */
  color: #fff;
  font-family: Epilogue, system-ui, sans-serif;
}

.campanha-copy h2 {
  color: #fff;
  font-family: "Bebas Neue";
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 39.3px;
  /* 89.318% */
  text-transform: uppercase;
}

.campanha-copy h2 span {
  color: #f3c65f;
}

.campanha-copy p {
  margin: 0.6rem 0;
  color: #fff;
  font-family: Epilogue;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  /* 143.75% */
}

.campanha-copy em {
  font-style: normal;
  color: #f3c65f;
  font-weight: 700;
}

/* responsivo: empilha o texto quando a tela for estreita */
@media (max-width: 1200px) {
  .campanha {
    justify-content: end;
    background-position: center top;
    background-size: cover;
    padding: 2rem 1rem;
    background-color: rgba(0, 0, 0, 0.8);
  }

  .campanha-copy {
    width: 40%;
    max-width: 720px;
  }

}


.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
}


/* ===================MOBILE====================== */


/* tablets grandes / desktop estreito */
@media (max-width: 1200px) {

  .bares-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .select-wrap::after {
    right: calc(50% - 150px);
  }

  .container-brinde {
    padding: 0 1.5rem 1.25rem;
  }

  .brinde-card {
    width: min(900px, 100%);
  }

  .image {
    padding: 4rem;
    background-size: cover;
  }
}

/* tablet / mobile grande */
@media (max-width: 900px) {

  /* campanha (texto à direita) */
  .campanha {
    justify-content: center;
    background-position: right;
    background-size: cover;
    padding: 2rem 1rem;
    height: auto;
  }

  /* campanha (texto à direita) */
  .campanha::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
  }

  .campanha-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
  }

  .header {
    background-size: cover;
    background-position: center;
  }

  .container-brinde {
    height: auto;
    align-items: flex-end;
    padding: 0 1rem 1rem;
  }

  .brinde-card {
    width: 100%;
  }

  .cols {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .image {
    height: 90vh;
    padding: 3rem;
  }
}

/* mobile */
@media (max-width: 768px) {

  .exemplo-video {
    max-width: 100%;
    border-radius: 12px;
  }

  .exemplo-video::after {
    top: 38%;
  }

  .play-button-video {
    width: 52px;
    height: 52px;
    bottom: 14%;
  }

  .image {
    padding: 2rem;
    height: 80vh;
    background-size: cover;
    background-position: center;
  }

  .container-oktuber h1 {
    font-size: 38px;
    line-height: 1.1;
  }

  .container-oktuber h2 {
    font-size: 18px;
    line-height: 1.25;
    margin-top: .5rem;
  }

  .container-oktuber p {
    font-size: 16px;
    line-height: 22px;
    max-width: 48ch;
  }

  .container-rodada {
    padding: 2rem 1rem;
    gap: 14px;
  }

  .container-rodada h1 {
    font-size: 22px;
    line-height: 1.1;
  }

  .container-rodada a {
    width: 100%;
    max-width: 340px;
    height: 64px;
    font-size: 22px;
  }

  .container-register {
    padding: 2rem 1rem;
    gap: 14px;
    margin: 2rem 0 0 0;
  }

  .container-register h1 {
    font-size: 22px;
    line-height: 1.1;
  }

  .container-register a {
    width: 100%;
    max-width: 340px;
    height: 64px;
    font-size: 22px;
  }

  .brinde-card h2 {
    font-size: 36px;
    line-height: 1.05;
  }

  .col p {
    font-size: 20px;
    line-height: 22px;
  }

  .steps li {
    grid-template-columns: 32px 1fr;
  }

  .steps li::before {
    width: 32px;
    height: 32px;
  }

  .brinde-card .footer {
    font-size: 22px;
    line-height: 1.1;
  }

  .bares-inner {
    width: min(100%, 100% - 2rem);
  }

  .bares-title {
    font-size: 40px;
    line-height: 0.7;
  }

  .select-wrap {
    margin: 12px 0 22px;
  }

  .select-wrap select {
    font-size: 16px;
    padding: 12px 40px 12px 14px;
  }

  .select-wrap::after {
    right: calc(50% - 120px);
  }

  .bares-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bar-card img {
    height: 180px;
  }

  .cta-text {
    font-size: 18px;
  }

  .cta-btn {
    width: 100%;
    max-width: 340px;
    height: 64px;
    font-size: 28px;
  }
}

/* mobile pequeno */
@media (max-width: 480px) {
  .container {
    width: 100%;
  }

  .campanha-copy h2 {
    font-size: 32px;
  }

  .header {
    min-height: 70vh;
  }

  .exemplo-video::after {
    font-size: 1.2rem;
    top: 36%;
  }

  .play-button-video {
    width: 46px;
    height: 46px;
    bottom: 12%;
  }

  .image {
    padding: 1.25rem;
    height: 70vh;
  }

  .container-oktuber h1 {
    font-size: 30px;
  }

  .container-oktuber h2 {
    font-size: 16px;
  }

  .container-oktuber p {
    font-size: 14px;
    line-height: 20px;
  }

  .brinde-card {
    border-radius: 12px;
    margin: 30PX 0;
  }

  .brinde-card h2 {
    font-size: 28px;
  }

  .steps li {
    grid-template-columns: 28px 1fr;
    gap: .6rem;
  }

  .steps li::before {
    width: 28px;
    height: 28px;
  }

  .qrcode {
    width: 40%;
  }

  .brinde-card .footer {
    font-size: 20px;
  }

  .container-video {
    margin: 1rem auto 4rem AUTO;
  }

  .campanha-copy p {
    font-size: 12px;
  }

  .footer {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 22px 16px;
    gap: 18px;
  }

  .footer img {
    max-width: 80%;
    height: auto;
  }

  .footer img:first-child {
    max-width: 260px;
  }

  /* logo maior */
  .footer img:last-child {
    max-width: 72px;
  }

  /* selo +18 menor */


  .bares-title {
    font-size: 32px;
  }

  .bar-card h3 {
    font-size: 16px;
    margin: 12px 14px 6px;
  }

  .card-body {
    padding: 12px 14px 14px;
    font-size: 13px;
  }
}