@charset "utf-8";

/* CSS Document */

:root{

  /* Paleta inspirada no banner (vinho/âmbar/dourado + neutros) */

  --bg: #120A0A;

  --surface: rgba(255,255,255,0.06);

  --surface-2: rgba(255,255,255,0.09);

  --text: #F3EEE8;

  --muted: rgba(243,238,232,0.78);

  --gold: #F2B24C;

  --gold-2: #D99A3A;

  --wine: #5B1416;

  --wine-2: #2A0C0D;

  --border: rgba(255,255,255,0.12);

  --shadow: 0 12px 30px rgba(0,0,0,0.35);



  --radius: 18px;

  --radius-sm: 12px;



  --font-title: "Playfair Display", serif;

  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;



  --container: 1120px;

}



*{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }

body{

  margin:0;

  font-family: var(--font-body);

  color: var(--text);

  background: radial-gradient(1200px 700px at 50% 0%, rgba(242,178,76,0.12), transparent 60%),

              radial-gradient(900px 500px at 10% 10%, rgba(91,20,22,0.25), transparent 55%),

              linear-gradient(180deg, var(--bg), #0B0606 70%);

}



a{ color: inherit; text-decoration: none; }

a:hover{ opacity: 0.92; }

img{ max-width: 100%; display:block; }



.container{

  width: min(var(--container), calc(100% - 32px));

  margin: 0 auto;

}



/* Topbar */

.topbar{

  position: sticky;

  top:0;

  z-index: 50;

  backdrop-filter: blur(10px);

  background: rgba(10,5,5,0.55);

  border-bottom: 1px solid var(--border);

}



.topbar__inner{

  display:flex;

  align-items:center;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 0;

}



.brand{

  display:flex;

  align-items:center;

  gap:10px;

  font-weight: 600;

}

.brand__dot{

  width:10px; height:10px;

  border-radius:999px;

  background: linear-gradient(180deg, var(--gold), var(--gold-2));

  box-shadow: 0 0 0 3px rgba(242,178,76,0.15);

}

.brand__text{ font-size: 14px; color: var(--muted); }



.nav{

  display:flex;

  gap: 18px;

}

.nav a{

  font-size: 14px;

  color: var(--muted);

}

.nav a:hover{ color: var(--text); }



.menuBtn{

  display:none;

  width:42px;

  height:42px;

  border:1px solid var(--border);

  border-radius: 12px;

  background: rgba(255,255,255,0.04);

  cursor:pointer;

}

.menuBtn span{

  display:block;

  width:18px;

  height:2px;

  margin:4px auto;

  background: var(--muted);

  border-radius: 2px;

}



.mobileNav{

  border-top: 1px solid var(--border);

  padding: 10px 0 14px;

}

.mobileNav a{

  display:block;

  padding: 10px 16px;

  color: var(--muted);

}

.mobileNav a:hover{ color: var(--text); background: rgba(255,255,255,0.04); }



/* Hero */

.hero{

  position: relative;

  padding-bottom: 26px;

}

.hero__banner{

  position: relative;

  height: min(58vh, 620px);

  overflow: hidden;

  border-bottom: 1px solid var(--border);

}

.hero__banner img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1.02);

}



}



.hero__overlay{

  position:absolute; inset:0;

  background:

    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85)),

    radial-gradient(800px 450px at 50% 25%, rgba(242,178,76,0.20), transparent 60%);

}



.hero__content{

  margin-top: -120px;

  position: relative;

  z-index: 2;

  padding-bottom: 6px;

}



.hero__content h1{

  font-family: var(--font-title);

  letter-spacing: 0.2px;

  line-height: 1.02;

  margin:0 0 10px;

  font-size: clamp(28px, 4vw, 52px);

  text-shadow: 0 10px 30px rgba(0,0,0,0.5);

}

.hero__content h1 span{

  color: var(--gold);

}

.hero__content p{

  margin: 0 0 18px;

  max-width: 720px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.55;

}



.hero__cta{

  display:flex;

  gap: 12px;

  flex-wrap: wrap;

}



/* Buttons */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap: 10px;

  padding: 12px 16px;

  border-radius: 14px;

  border: 1px solid var(--border);

  font-weight: 600;

  font-size: 14px;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

}

.btn:hover{ transform: translateY(-1px); }

.btn--primary{

  background: linear-gradient(180deg, rgba(242,178,76,0.95), rgba(217,154,58,0.95));

  color: #1A0E0B;

  border-color: rgba(242,178,76,0.35);

}

.btn--ghost{

  background: rgba(255,255,255,0.04);

  color: var(--text);

}

.btn--small{ padding: 10px 14px; font-size: 13px; }



/* Sections */

.section{

  padding: 34px 0;

}

.section__header{

  display:flex;

  flex-direction: column;

  gap: 6px;

  margin-bottom: 18px;

}

.section__header h2{

  font-family: var(--font-title);

  margin:0;

  font-size: clamp(22px, 2.6vw, 34px);

}

.section__header p{

  margin:0;

  color: var(--muted);

  line-height: 1.5;

}



/* Filters */

.filters{

  display:flex;

  gap: 10px;

  flex-wrap: wrap;

  margin: 16px 0 18px;

}

.chip{

  border: 1px solid var(--border);

  background: rgba(255,255,255,0.04);

  color: var(--muted);

  padding: 10px 12px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 13px;

  cursor: pointer;

}

.chip.is-active{

  background: rgba(242,178,76,0.12);

  border-color: rgba(242,178,76,0.35);

  color: var(--text);

}



/* Cards grid */

.grid{

  display:grid;

  gap: 14px;

  grid-template-columns: repeat(12, 1fr);

}



/* Cards verticais */

.card{

  grid-column: span 4;

  padding: 16px 16px 14px;

  border-radius: var(--radius);

  border: 1px solid var(--border);

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));

  box-shadow: var(--shadow);

  min-height: 260px;

  display:flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

}

.card::before{

  content:"";

  position:absolute;

  inset: -40px -40px auto auto;

  width: 160px;

  height: 160px;

  background: radial-gradient(circle at 30% 30%, rgba(242,178,76,0.22), transparent 65%);

  transform: rotate(15deg);

}

.card__tag{

  display:inline-flex;

  width: fit-content;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.3px;

  background: rgba(91,20,22,0.45);

  border: 1px solid rgba(242,178,76,0.25);

  color: var(--text);

  margin-bottom: 10px;

}

.card__title{

  margin: 0 0 8px;

  font-size: 18px;

  line-height: 1.18;

}

.card__meta{

  margin: 0 0 10px;

  display:flex;

  flex-wrap: wrap;

  gap: 10px 12px;

  color: rgba(243,238,232,0.74);

  font-size: 13px;

}

.card__text{

  margin: 0 0 14px;

  color: var(--muted);

  line-height: 1.55;

  font-size: 14px;

  flex: 1;

}

.card__link{

  font-weight: 700;

  color: var(--gold);

  width: fit-content;

}

.card__link:hover{ text-decoration: underline; }



/* Supporters slider */

.supporters{

  margin-top: 16px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.04);

  overflow: hidden;

  position: relative;

}

.supporters::after{

  content:"";

  position:absolute; inset:0;

  pointer-events:none;

  background: linear-gradient(90deg, rgba(18,10,10,0.95), transparent 20%, transparent 80%, rgba(18,10,10,0.95));

}

.supporters__track{

  display:flex;

  gap: 28px;

  padding: 18px 22px;

  align-items:center;

  animation: marquee 26s linear infinite;

  will-change: transform;

}

.supporterLogo{

  height: 54px;

  min-width: 140px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding: 10px 14px;

  border-radius: 14px;

  background: rgba(0,0,0,0.18);

  border: 1px solid rgba(255,255,255,0.10);

}

.supporterLogo img{

  max-height: 36px;

  max-width: 120px;

  filter: grayscale(1) contrast(1.05) brightness(1.1);

  opacity: 0.92;

}

.supporters__hint{

  margin: 12px 0 0;

  color: var(--muted);

  font-size: 13px;

}



@keyframes marquee{

  from{ transform: translateX(0); }

  to{ transform: translateX(-50%); }

}



/* Footer */

.footer{

  margin-top: 30px;

  padding-top: 26px;

  border-top: 1px solid var(--border);

  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.38));

}

.footer__grid{

  display:grid;

  gap: 18px;

  grid-template-columns: 1.2fr 1fr 1fr;

  padding-bottom: 22px;

}

.footer h3{

  margin: 0 0 10px;

  font-family: var(--font-title);

  font-size: 18px;

}

.footer__list{

  list-style:none;

  padding:0;

  margin:0;

  display:flex;

  flex-direction: column;

  gap: 8px;

  color: var(--muted);

}

.footer__list a{

  color: var(--muted);

  text-decoration: underline;

  text-decoration-color: rgba(242,178,76,0.25);

}

.footer__list a:hover{

  color: var(--text);

  text-decoration-color: rgba(242,178,76,0.55);

}



.footer__text{

  color: var(--muted);

  line-height: 1.6;

  margin: 0 0 12px;

}



.footer__bottom{

  border-top: 1px solid var(--border);

  padding: 14px 0;

}

.footer__bottomInner{

  display:flex;

  gap: 10px;

  flex-wrap: wrap;

  align-items:center;

  justify-content: space-between;

  color: rgba(243,238,232,0.70);

  font-size: 13px;

}

.footer__sep{ opacity: 0.6; }



/* Responsive */

@media (max-width: 980px){

  .card{ grid-column: span 6; }

  .footer__grid{ grid-template-columns: 1fr; }

}



@media (max-width: 720px){

  .nav{ display:none; }

  .menuBtn{ display:block; }

  .hero__content{ margin-top: -90px; }

  .card{ grid-column: span 12; }

  .supporters__track{ animation-duration: 22s; }

}

/* ========== AJUSTE MOBILE: mostrar o máximo do banner (sem cortar) ========== */
@media (max-width: 768px) {
  .hero__banner{
    /* em vez de uma altura grande, deixa o banner “encaixar” melhor no celular */
    height: auto;
    aspect-ratio: 16 / 9;  /* mantém proporção do banner horizontal */
    background: #0B0606;   /* evita bordas brancas se sobrar espaço */
  }

  .hero__banner img{
    width: 100%;
    height: 100%;
    object-fit: contain;        /* NÃO corta; mostra o máximo possível */
    object-position: center;    /* centraliza */
    transform: none;            /* remove zoom */
  }

  .hero__overlay{
    /* overlay mais leve no mobile para não “matar” a iluminação */
    background:
      linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.65)),
      radial-gradient(800px 450px at 50% 20%, rgba(242,178,76,0.16), transparent 60%);
  }

  /* Ajusta o “encaixe” do texto que vem por cima */
  .hero__content{
    margin-top: -60px;
  }
}