@font-face {
  font-family: edenred;
  src: url("assets/fonts/edenred.otf") format("opentype");
}

:root {
  --purple-start: #711CFF;
  --purple-end: #B32490;
  --white: #fff;
  --purple-light: rgba(177, 28, 255, 0.1);
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Edenred', sans-serif;
  width: 100%;
  min-height: 100vh;
  
  /* CartaoBRF purple gradient */
  background: linear-gradient(90deg, #711CFF 22%, #B32490 165%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  color: var(--white);
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: center;
}

.eclipse-logo {
  display: flex;
  justify-content: center;
}

.eclipse-logo img {
  width: 90%;
  max-width: 350px;
}

.content-logo {
  position: relative;
  top: -50%;
  text-align: center;
}

.content-logo img {
  width: 26%;
  min-width: 180px;
  max-width: 250px;
}

.title {
  text-align: center;
  position: relative;
  bottom: 70px;
  padding: 0 20px;
}

.title h1 {
  font-weight: 300;
  font-size: clamp(16px, 3vw, 28px);
  line-height: 1.4;
}

.content-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

.eva, .app {
  text-align: center;
}

.link-eva, .link-wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  transition: transform 0.3s ease;
}

.link-eva:hover, .link-wallet:hover {
  transform: scale(1.05);
}

.channel-label {
  margin-top: 15px;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 400;
}

.line-center {
  display: none;
}

.sacola {
  display: none;
}

footer {
  margin-top: auto;
  padding: 30px 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-content p {
  margin: 5px 0;
  font-size: clamp(14px, 2vw, 16px);
}

.footer-hours {
  font-size: clamp(12px, 1.8vw, 14px);
  opacity: 0.9;
}

/* Mobile styles */
@media (max-width: 500px) {
  .title {
    bottom: 30px;
  }

  .content-center {
    flex-direction: column;
  }

  .eva img, .app img {
    width: 70%;
    max-width: 280px;
  }

  .line-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 30px 0;
  }
}

/* Tablet styles */
@media (min-width: 501px) and (max-width: 1023px) {
  .title {
    bottom: 60px;
  }

  .content-center {
    flex-direction: column;
  }

  .eva img, .app img {
    width: 60%;
    max-width: 350px;
  }

  .line-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 30px 0;
  }
}

/* Desktop styles - side by side layout */
@media (min-width: 1024px) {
  .content-center {
    display: flex;
    justify-content: center;
    gap: 80px;
  }

  .eva img {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 10;
  }

  .app img {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 10;
  }

  .sacola {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    bottom: 280px;
    opacity: 0.3;
  }
}

@media (min-width: 1513px) {
  .content-center {
    gap: 120px;
  }

  .sacola {
    bottom: 360px;
    max-width: 1000px;
  }
}

@media (min-width: 1921px) {
  .content-center {
    gap: 150px;
  }

  .sacola {
    bottom: 410px;
    max-width: 1200px;
  }
}