@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');

/*
  Global theme variables for the Atack Priston Tale website.  
  Dark navy backgrounds, golden typography and glass buttons create
  a premium fantasy RPG feel.  The CSS defines responsive layouts
  and subtle animations for icons and buttons.  Feel free to adjust
  colours by editing the CSS variables below.
*/

:root {
  --section-pad-y: 72px;
  --section-gap-y: 72px;
  --shadow-tint: rgba(0,0,0,0.55);

  /* Primary background colour (navy blue) */
  --bg-colour: #040e29;
  /* Golden accent colour used for text and highlights */
  --primary-colour: #bfa37e;
  /* Light colour for text on dark backgrounds */
  --light-colour: #f5f5f5;
}

body {
  margin: 0;
  font-family: 'MedievalSharp', cursive;
  background-color: var(--bg-colour);
  color: var(--primary-colour);
  line-height: 1.5;
  /* Add top padding equal to the height of the fixed navigation bar so that
     content sits below it. The promotional banner will sit inside the normal
     flow and therefore does not require additional padding. */
  /* Increase top padding to accommodate the fixed navigation bar and promotional banner.
     The nav may grow in height when additional info (Bless Castle, countdown) is present,
     so allocate extra space to avoid content overlap. */
  padding-top: 0;
}

a {
  color: var(--primary-colour);
  text-decoration: none;
}

/* Navigation bar styling */
nav {
  /* Center the whole navigation group (logo + buttons) exactly in the middle
     of the ornate frame (launcher style). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 44px);

  /* Menu in normal flow (scrolls away with the page) */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  /* Pixel-perfect height based on the frame image ratio (2048x177).
     Bind the container height to the same ratio so the frame never distorts
     and no empty band appears below the image. */
  /* Pixel-perfect height that matches the frame aspect ratio (2048x177)
     while staying within a clean UI range on desktop. */
  height: clamp(120px, calc(100vw * 177 / 2048), 180px);

  /* Responsive padding keeps content away from the decorative edges */
  padding: clamp(10px, calc(100vw * 0.008), 18px) clamp(16px, 3vw, 48px);

  /* Ornate frame background (no distortion) */
  background-image: url("assets/images/ui/bg-menu-frame.png");
  background-repeat: no-repeat;
  background-position: center top;
  /* Keep frame crisp without stretching; crop on ultra-wide if needed */
  background-size: cover;

  border-bottom: 1px solid rgba(191, 163, 126, 0.18);
}

/* Inner layout: group logo + menu in the exact horizontal center */
nav .logo {
  display: flex;
  align-items: center;
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
}

/* Spacer used in older layouts; keep it inert to avoid centering bugs */
.nav-spacer { display: none !important; }

/* Promotional banner styling
   This banner appears just below the navigation bar and scrolls a message
   horizontally across the screen in an infinite loop. */
.promo-banner {
  /* Position the banner at the very top of the viewport. Because the nav is
     offset downwards, the banner occupies the very top area of the page. */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  /* Reduce the height so the borders sit close to the text */
  height: 30px;
  /* Apply the same gradient used on news cards hover for the background */
  background: linear-gradient(145deg, rgba(191, 163, 126, 0.15), rgba(4, 14, 41, 0.6));
  /* Make the borders thinner and aligned closely to the text */
  border-top: 1px solid rgba(191, 163, 126, 0.3);
  border-bottom: 1px solid rgba(191, 163, 126, 0.3);
  /* Align text vertically with the reduced height */
  line-height: 30px;
  text-align: center;
  /* Place the banner above the navigation bar in the stacking context */
  z-index: 1;
  /* Blinking animation: retain the faster blink speed of 4 seconds */
  animation: blink-bg 4s ease-in-out infinite;
}

/* Container for the scrolling promo text */
/* Styling for promo text inside the promotional banner */
.promo-banner .promo-text {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--primary-colour);
}



/* Hide legacy spacer element (kept in HTML for compatibility) */
.nav-spacer { display: none !important; }

/* Site logo image within the navigation bar.  The height is constrained so it fits
   neatly inside the fixed nav bar and scales proportionally. */
/* Site logo image within the navigation bar.  Increased height by 20% to make the
   icon more prominent in the header.  The width adjusts automatically to
   preserve aspect ratio. */
.site-logo {
  height: 60px;
  width: auto;
  display: block;
}

/* Botão/banner "Regulamento Oficial" no topo (lado direito) */
.nav-regulamento {
  position: absolute;

  /* Mantém o banner 100% dentro da área azul do frame, sem encostar no dourado */
  top: calc(clamp(14px, calc(100vw * 0.010), 22px) + 1px);
  bottom: calc(clamp(14px, calc(100vw * 0.010), 22px) + 1px);

  /* +30px para a esquerda em relação ao alinhamento anterior */
  right: calc(clamp(48px, 6vw, 130px) + 30px);

  display: inline-flex;
  align-items: stretch;
  justify-content: center;

  text-decoration: none;
  z-index: 60;
}

.nav-regulamento img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;

  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.nav-regulamento:hover img {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.07);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}

@media (max-width: 980px) {
  .nav-regulamento { right: 14px; }
  .nav-regulamento img { height: 48px; }
}


/* Footer logo styling: slightly smaller for the footer area */
/* Footer logo styling: enlarged to stand out in the footer */
.footer-logo {
  /* Footer logo displayed at 200x200 as requested */
  height: 200px;
  width: 200px;
  display: block;
  margin: 0 auto 10px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li a {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: 0.3px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(191, 163, 126, 0.18);
  background: rgba(0, 0, 0, 0.10);
  backdrop-filter: none;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

nav li a:hover {
  color: #fff;
  border-color: rgba(230, 200, 140, 0.55);
  background: linear-gradient(145deg, rgba(230, 200, 140, 0.22), rgba(4, 14, 41, 0.35));
  box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(230, 200, 140, 0.18) inset;
  transform: translateY(-1px);
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
}

nav li a.active {
  color: #fff;
  border-color: rgba(230, 200, 140, 0.65);
  background: linear-gradient(145deg, rgba(230, 200, 140, 0.26), rgba(4, 14, 41, 0.35));
  box-shadow: 0 12px 26px rgba(0,0,0,0.38), 0 0 0 1px rgba(230, 200, 140, 0.22) inset;
}



/* Hero section with video background and overlay */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
  color: var(--light-colour);
  text-align: center;

  /* The hero sits below the fixed navigation bar; with a small icon the default top margin is sufficient */
  margin-top: 0;
}

/* Subtle top fade so the hero feels like it continues from the ornate header area */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background: linear-gradient(to bottom, rgba(4,14,41,0.92), rgba(4,14,41,0));
  z-index: 2;
  pointer-events: none;
}

.hero video,
.hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  z-index: 0;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 14, 41, 0.7);
  z-index: 1;
}

/* Fade overlay at the bottom of the hero banner. This gradient gently
   transitions the video into the page background, creating a "sumindo"
   effect. The overlay sits above the video and behind the content. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Height as a percentage of the hero to control the fade length */
  height: 20vh;
  /* Gradient from transparent to the page background colour */
  background: linear-gradient(to bottom, rgba(4, 14, 41, 0) 0%, rgba(4, 14, 41, 1) 100%);
  z-index: 3;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}

.hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.hero p {
  font-size: 1.2rem;
}

/* Styling for the CTA title and subtitle displayed in the hero section */
.cta-title {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  margin: 20px 0 5px;
  color: var(--primary-colour);
  /* Apply a pulsing animation to draw attention to the CTA title */
  animation: ctaPulse 3s ease-in-out infinite;
}

.cta-subtitle {
  font-family: 'MedievalSharp', cursive;
  font-size: 1.1rem;
  margin: 0 0 20px;
  color: var(--light-colour);
}

/* Glass button styling */
.button {
  display: inline-block;
  padding: 12px 30px;
  margin-top: 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: none;
  color: var(--primary-colour);
  font-family: 'Cinzel', serif;
  font-size: 16px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.button:hover {
  background: rgba(191, 163, 126, 0.4);
  color: var(--light-colour);
  transform: translateY(-3px);
}

/* Generic section styling */
section {
  /* Global section rhythm (menu is not fixed) */
  padding: var(--section-pad-y, 72px) var(--section-pad-x, 20px);
  margin-top: 0;
}

section h2.section-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin: 0 auto 20px;
  position: relative;
  text-align: center;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary-colour);
  margin: 10px auto 0;
}

/* Reduce the top margin specifically for the news section heading so the decorative
   divider icons appear immediately above the title without a large gap.  The
   default margin on section titles remains for other sections. */
.news .section-title {
  margin-top: 0;
}

/* Image title (Noticias & Atualizacoes) */
.section-title-image {
  line-height: 0;
}
.section-title-image::after {
  display: none;
}
.news-title-img{
  width: 33%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}

/* Ornamental divider under the news title (responsive, no distortion) */
.news-orn-divider{
  width: 33%;
  max-width: 400px;
  height: 18px;
  margin: 0 auto 28px;
  position: relative;
}
.news-orn-divider::before,
.news-orn-divider::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 46%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(191,163,126,0), rgba(191,163,126,0.9), rgba(191,163,126,0));
  opacity: 0.95;
}
.news-orn-divider::before{left:0;}
.news-orn-divider::after{right:0;}
.news-orn-divider span{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(191,163,126,0.95);
  box-shadow: 0 0 0 3px rgba(191,163,126,0.18);
}

@media (max-width: 768px) {
  :root {
    --section-pad-y: 48px;
    --section-gap-y: 48px;
  }

  .news-title-img{
  width: 33%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}
  .news-orn-divider{
  width: 33%;
  max-width: 400px;
  height: 18px;
  margin: 0 auto 28px;
  position: relative;
}
.news-orn-divider::before,
.news-orn-divider::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 46%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(191,163,126,0), rgba(191,163,126,0.9), rgba(191,163,126,0));
  opacity: 0.95;
}
.news-orn-divider::before{left:0;}
.news-orn-divider::after{right:0;}
.news-orn-divider span{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(191,163,126,0.95);
  box-shadow: 0 0 0 3px rgba(191,163,126,0.18);
}
}


/* Card grid for news, updates and donation packages */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  color: var(--light-colour);
}

.card:hover {
  transform: translateY(-6px);
  /* Highlight cards on hover using a subtle golden-to-navy gradient and a brighter border */
  background: linear-gradient(145deg, rgba(191, 163, 126, 0.15), rgba(4, 14, 41, 0.6));
  border: 1px solid rgba(191, 163, 126, 0.4);
}

/* When a card is selected (active), apply the same gradient highlight without the hover transform */
.card.active {
  background: linear-gradient(145deg, rgba(191, 163, 126, 0.15), rgba(4, 14, 41, 0.6));
  border: 1px solid rgba(191, 163, 126, 0.4);
}

/* Detail section for guide descriptions */
.guide-detail {
  margin-top: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  backdrop-filter: none;
  color: var(--light-colour);
}

.guide-detail h3.detail-title {
  font-family: 'Cinzel', serif;
  margin-top: 0;
  margin-bottom: 15px;
}

.guide-detail img.detail-banner {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
  opacity: 0.85;
}

.guide-detail .video-placeholder {
  width: 100%;
  height: 260px;
  background: rgba(4, 14, 41, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-colour);
  font-family: 'Cinzel', serif;
  font-size: 18px;
}

.guide-detail .detail-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--light-colour);
}

.card h3 {
  font-family: 'Cinzel', serif;
  margin-top: 0;
}

.card p {
  margin: 5px 0 10px;
  font-size: 14px;
}

.card .button {
  margin-top: 10px;
}

/* Animated icons used in news cards */
.card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  animation: float 3s ease-in-out infinite;
}

/* News banner wrapper: allows us to apply a single alpha/overlay frame on top of any
   banner image (placeholder or real news artwork). */
.card .banner-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0 0 10px 0;
}

/* The banner image itself */
.card .banner-wrap .banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly dim the banner so that golden text stands out */
  opacity: 0.92;
}

/* Alpha overlay (frame) applied to every news banner */
.card .banner-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/news_alpha.png") center/cover no-repeat;
  pointer-events: none;
  /* A gentle boost so the frame reads even on bright banners */
  opacity: 0.95;
}

/* Keyframes for blinking effect on the promotional banner.
   The banner slowly fades between full opacity and a reduced opacity,
   creating a subtle blinking effect.  The animation duration is
   controlled on the .promo-banner element itself. */
@keyframes blink-bg {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Keyframes for the pulsing CTA title.  The text grows slightly and changes
   colour midway through the cycle to draw attention without being distracting. */
@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    color: var(--primary-colour);
  }
  50% {
    transform: scale(1.05);
    color: var(--light-colour);
  }
}

/* Keyframes for blinking decorative icons.  The icons fade in and out to draw subtle
   attention without being overly distracting. */
@keyframes blinkIcon {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Icons over the banner placed below the hero logo.  This container sits between
   the hero and the news section, overlapping the banner slightly via negative
   margin to create the impression of being on top of the hero background. */
.banner-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  /* When the icons were positioned over the hero banner, a negative top margin was used to
     overlap the video. Now that they live inside the news section just above the heading,
     we remove the negative top offset and simply add bottom spacing to separate them from
     the section title. */
  margin-top: 0;
  /* Reduce the bottom spacing so the icons sit closer to the news heading */
  margin-bottom: 10px;
  pointer-events: none;
}

/* Individual decorative icons in the banner area.  These icons blink slowly to
   draw subtle attention. */
.banner-icon {
  width: 70px;
  height: 70px;
  animation: blinkIcon 3s ease-in-out infinite;
}

/* Add a subtle bottom border to the news section to separate it from the donations
   section.  The border uses the golden accent colour with slight transparency
   and adds extra spacing below the news section. */
.news {
  border-bottom: 1px solid rgba(191, 163, 126, 0.4);
  margin: 0;
  padding-top: 32px;
  padding-bottom: var(--section-gap-y);
}

/* Ranking and leaders panel on the home page */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.stats .leader-list,
.stats .ranking-list {
  flex: 1 1 280px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: none;
  color: var(--light-colour);
}

.stats h3 {
  font-family: 'Cinzel', serif;
  margin-top: 0;
  margin-bottom: 10px;
}

.stats ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stats li {
  margin: 4px 0;
  font-size: 15px;
}

/* Table styles used on ranking page */
.table-ranking {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--light-colour);
}

.table-ranking th,
.table-ranking td {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.table-ranking thead {
  background: rgba(255, 255, 255, 0.1);
}

.table-ranking tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.05);
}

/* Footer styling */
footer {
  background: rgba(0, 0, 0, 0.3);
  color: var(--primary-colour);
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

/* Form styling used on the registration page */
form {
  max-width: 500px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px;
  border-radius: 12px;
  backdrop-filter: none;
  color: var(--light-colour);
}

form label {
  display: block;
  margin-bottom: 5px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--light-colour);
  font-family: 'MedievalSharp', cursive;
  font-size: 14px;
}

form input::placeholder {
  color: rgba(245, 245, 245, 0.6);
}

form .button {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

/* Large logo overlay inside the hero banner */
.hero-logo {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 5;
}

/* Styling for the large logo image used in the hero overlay */
.hero-logo-image {
  width: 350px;
  max-width: 700px;
  height: auto;
  display: block;
}

/* BOTÃO DOWNLOAD (GIF/MP4) FLUTUANTE NO BANNER PRINCIPAL */
.download-float {
  position: absolute;
  right: 35px;
  bottom: 35px;
  width: 420px;
  height: 420px;
  z-index: 20;
  cursor: pointer;
  /* Magnetic translate uses these vars set by JS */
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}


.download-float__inner {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0,255,200,.55));
  animation: downloadGlow 2.6s ease-in-out infinite;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.download-float video,
.download-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transform-origin: center;
  animation: downloadBreath 3.8s ease-in-out infinite;
}

/* Hover keeps working, while idle breath/glow continues */
.download-float:hover .download-float__inner {
  transform: scale(1.08);
  filter: drop-shadow(0 0 22px rgba(0,255,200,.95));
}

@keyframes downloadBreath {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes downloadGlow {
  0% { filter: drop-shadow(0 0 10px rgba(0,255,200,.55)); }
  50% { filter: drop-shadow(0 0 20px rgba(0,255,200,.95)); }
  100% { filter: drop-shadow(0 0 10px rgba(0,255,200,.55)); }
}

/* Desktop gigante */
@media (min-width: 1280px) {
  .download-float {
    width: 520px;
    height: 520px;
  }
}

@media (max-width: 768px) {
  .download-float {
    width: 220px;
    height: 220px;
    right: 16px;
    bottom: 16px;
  }
}


.news-title-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}



/* ===========================
   News (Dynamic) + Modal
   =========================== */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 18px;
}

/* News carousel (home) */
.news-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.news-carousel .news-grid {
  flex: 1;
  margin-top: 0;
}

.news-nav {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  transition: transform 180ms ease, filter 180ms ease, border-color 180ms ease;
}

.news-nav:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.34);
  filter: drop-shadow(0 0 14px rgba(0,190,255,0.25));
}

.news-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 768px) {
  .news-carousel {
    gap: 10px;
  }
  .news-nav {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
}

.news-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  cursor: pointer;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.news-card.reveal {
  animation: newsEnter 700ms ease forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes newsEnter {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.news-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}

.news-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.35);
}

.news-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.news-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.news-badge.new {
  background: rgba(0, 190, 255, 0.18);
  box-shadow: 0 0 18px rgba(0,190,255,0.35);
  animation: badgePulse 1.6s ease-in-out infinite;
}

.news-badge.hot {
  background: rgba(255, 170, 0, 0.18);
  box-shadow: 0 0 22px rgba(255,170,0,0.55);
  animation: badgePulse 1.4s ease-in-out infinite;
}

@keyframes badgePulse {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.07); filter: brightness(1.2); }
}

.news-title {
  margin: 14px 14px 6px;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 190, 255, 0.25);
}

.news-meta {
  margin: 0 14px 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

.news-meta .dot {
  margin: 0 6px;
  opacity: 0.7;
}

.news-excerpt {
  margin: 0 14px 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  min-height: 40px;
}

.news-cta {
  margin: 0 14px 16px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  transition: transform 200ms ease, filter 200ms ease;
}

.news-card:hover .news-cta {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(0,190,255,0.35));
}

.news-card.featured {
  border-color: rgba(255, 180, 0, 0.55);
  box-shadow: 0 0 40px rgba(255, 180, 0, 0.30), 0 16px 44px rgba(0,0,0,0.6);
}

.news-error {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.85);
}

/* Modal */
.news-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,0.62);
  z-index: 9999;
}

.news-modal-overlay.open {
  display: flex;
  animation: overlayIn 220ms ease forwards;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.news-modal {
  width: min(920px, 96vw);
  max-height: min(82vh, 740px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 22px 70px rgba(0,0,0,0.75);
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  animation: modalIn 260ms ease forwards;
}

@keyframes modalIn {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.news-modal-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  z-index: 2;
}

.news-modal-header {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: rgba(0,0,0,0.35);
}

.news-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-modal-content {
  padding: 18px 18px 22px;
}

.news-modal-title {
  margin: 0 0 6px;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #fff;
}

.news-modal-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
}

.news-modal-body {
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.7;
  max-height: 38vh;
  overflow: auto;
  padding-right: 6px;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .news-modal-header { aspect-ratio: 16 / 9; }
  .news-modal-body { max-height: 44vh; }
}


/* Downloads page - Cliente Completo banner video */
.download-card-banner{
  width: calc(100% + 40px);
  /* Usa o aspect ratio REAL do vídeo (sem distorção) */
  aspect-ratio: var(--ar-w) / var(--ar-h);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  margin: -20px -20px 16px -20px; /* full-bleed dentro do card */
  position: relative;
  border-bottom: 1px solid rgba(191, 163, 126, 0.25);
  box-shadow: 0 0 28px rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.18);
}

.download-card-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.6) 100%);
  pointer-events:none;
  z-index: 3;
}

.download-card-video{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain; /* respeita dimensões do vídeo */
  display:block;
}

/* GLOW AAA sincronizado com o vídeo (usa uma cópia do próprio vídeo por trás) */
.download-card-banner--glow{
  isolation: isolate;
}

.download-card-video--glow{
  position: absolute;
  inset: -18px;          /* espalha a luz um pouco além das bordas */
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  z-index: 1;
  object-fit: cover;
  filter: none;
  opacity: 0.65;
  transform: scale(1.06);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: videoGlowBreath 3.6s ease-in-out infinite;
}

@keyframes videoGlowBreath{
  0%{ opacity: 0.52; transform: scale(1.05); }
  50%{ opacity: 0.86; transform: scale(1.10); }
  100%{ opacity: 0.52; transform: scale(1.05); }
}

@media (max-width: 768px){
  .download-card-banner{
    border-radius: 10px;
  }
  .download-card-video--glow{
    filter: none;
    opacity: 0.50;
  }
}


@media (max-width: 768px){
  .download-card-banner{
    border-radius: 10px;
  }
}


/* =========================
   PATCH TIMELINE + VIDEO BANNERS (Downloads)
   ========================= */
.download-video-card,
.patch-video-card{
  position: relative;
  overflow: hidden;
}

.download-video-banner{
  position: relative;
  width: calc(100% + 40px);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  margin: -20px -20px 16px -20px; /* full-bleed dentro do card */
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(191, 163, 126, 0.22);
}

.download-video-banner video{
  width: 100%;
  height: auto;
  max-height: 320px; /* mais adequado na área de download */
  object-fit: contain;
  display: block;
}

.patch-video-banner video{
  max-height: 260px; /* patch mais compacto */
}

/* Glow sincronizado com o vídeo (camada extra) */
.patchVideoGlow{
  position: absolute;
  inset: -18%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: none;
  opacity: 0.65;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
  animation: patchGlowBreath 4s ease-in-out infinite;
}

.patchVideoMain{
  position: relative;
  z-index: 1;
}

@keyframes patchGlowBreath{
  0%{ opacity: 0.45; }
  50%{ opacity: 0.75; }
  100%{ opacity: 0.45; }
}

.patch-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.patch-meta{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  opacity: 0.9;
}

.patch-badge{
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  letter-spacing: 0.3px;
}

.patch-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* botão secundário */
.button.button-secondary{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.18);
}

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

/* Timeline */
.patch-timeline{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.patch-timeline-title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.95;
}

.patch-timeline-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.patch-item-btn{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease, border-color .25s ease;
}

.patch-item-btn:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 0 18px rgba(0,255,255,0.35));
  border-color: rgba(0,255,255,0.35);
}

.patch-item.latest .patch-item-btn{
  border-color: rgba(255, 180, 0, 0.45);
  filter: drop-shadow(0 0 18px rgba(255, 180, 0, 0.35));
}

.patch-item-top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  opacity: 0.92;
}

.patch-item-version{
  font-weight: 800;
}

.patch-item-title{
  margin-top: 6px;
  font-weight: 800;
  font-size: 13px;
}

.patch-item-summary{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}

/* Patch modal */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.62);
  z-index: 9999;
}

.modal-overlay.open{
  display: flex;
}

.modal{
  width: min(860px, 96vw);
  max-height: 86vh;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,14,0.92);
  box-shadow: 0 0 40px rgba(0,255,255,0.15);
  animation: modalIn .22s ease-out;
  position: relative;
  padding: 18px 18px 16px;
}

.modal-header{
  margin-bottom: 12px;
}

.modal-sub{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
}

.modal-close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}

.modal-body{
  font-size: 14px;
  line-height: 1.6;
}

.patch-notes{
  margin: 10px 0 0 18px;
}

.patch-modal-summary{
  opacity: 0.92;
}

body.modal-open{
  overflow: hidden;
}

@keyframes modalIn{
  from{ opacity: 0; transform: scale(0.96); }
  to{ opacity: 1; transform: scale(1); }
}

/* Mobile adjustments */
@media (max-width: 768px){
  .download-video-banner video{ max-height: 280px; }
  .patch-video-banner video{ max-height: 240px; }
  .patch-head{ flex-direction: column; align-items: flex-start; }
}


/* Ajuste de proporção dos banners de vídeo na área de download */
.download-card-banner{ max-height: 420px; }
@media (max-width: 768px){
  .download-card-banner{ max-height: 280px; }
}

/* Downloads page - Programas essenciais */
.essential-downloads{
  margin-top: 34px;
  max-width: 1100px;
}

.essential-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.essential-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.essential-item:hover{
  transform: translateY(-2px);
  border-color: rgba(191,163,126,0.55);
  box-shadow: 0 0 26px rgba(0,0,0,0.55);
}

.essential-icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .3px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  flex: 0 0 38px;
}

.essential-text{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.essential-text strong{
  font-size: 15px;
}

.essential-text span{
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

.important-instructions{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 1100px;
}

.important-instructions h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}

.important-instructions h3::before{
  content:"";
  width: 26px;
  height: 10px;
  border: 2px solid rgba(191,163,126,0.85);
  border-left: none;
  border-right: none;
  transform: skewX(-20deg);
  opacity: .9;
}

.important-instructions ul{
  margin: 10px 0 0 18px;
  max-width: 980px;
}



/* =========================
   VIDEO AS CARD BACKGROUND (Downloads)
   ========================= */
.video-bg-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 280px;
}

/* controlar "proporção" visual: cards mais baixos e elegantes */
#client-card.video-bg-card{ min-height: 300px; }
#patch-card.video-bg-card{ min-height: 320px; }

.video-bg-card .bgVideoMain{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* BG preenchendo o card */
  transform: scale(1.02);
  z-index: 0;
}

.video-bg-card .bgVideoGlow{
  position: absolute;
  inset: -18%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: none;
  opacity: 0.65;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* overlay para legibilidade */
.video-bg-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,10,22,0.28) 0%, rgba(6,10,22,0.78) 55%, rgba(6,10,22,0.92) 100%);
  z-index: 1;
}

/* patch: um pouco mais fechado pra texto ficar sempre legível */
.video-bg-overlay--patch{
  background: linear-gradient(180deg, rgba(6,10,22,0.38) 0%, rgba(6,10,22,0.84) 55%, rgba(6,10,22,0.95) 100%);
}

.video-bg-content{
  position: relative;
  z-index: 2;
  padding: 22px 22px 20px 22px;
}

.video-bg-content h3,
.video-bg-content p,
.video-bg-content .patch-head,
.video-bg-content .patch-meta,
.video-bg-content .patch-timeline-title{
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

/* reduzir a timeline um pouco dentro do card */
#patch-card .patch-timeline{
  margin-top: 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
}

/* mobile: cards compactos e glow mais leve */
@media (max-width: 768px){
  #client-card.video-bg-card{ min-height: 260px; }
  #patch-card.video-bg-card{ min-height: 300px; }
  .video-bg-card .bgVideoGlow{
    filter: none;
    opacity: 0.55;
  }
  .video-bg-content{ padding: 18px; }
}


/* === Downloads UltraHD Hero Banner (3840x1100) === */
.page-banner-downloads{
  width:100%;
  height:min(1100px, 63vh);
  position:relative;

  background-image:url("assets/images/banner-downloads.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;

  overflow:hidden;
}

.page-banner-downloads::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:38%;

  background:linear-gradient(
    to top,
    rgba(6, 10, 22, 1) 0%,
    rgba(6, 10, 22, 0.92) 28%,
    rgba(6, 10, 22, 0.65) 52%,
    rgba(6, 10, 22, 0.3) 72%,
    rgba(6, 10, 22, 0) 100%
  );

  pointer-events:none;
}

@media (max-width: 768px){
  .page-banner-downloads{
    height:420px;
    background-position:top center;
  }
  .page-banner-downloads::after{
    height:55%;
  }
}


/* === Downloads UltraHD VIDEO Hero Banner (3840x1100) === */
.page-banner-downloads{
  width:100%;
  height:min(1100px, 63vh);
  position:relative;
  overflow:hidden;
}

.page-banner-downloads video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

.page-banner-downloads::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:38%;
  background:linear-gradient(
    to top,
    rgba(6,10,22,1) 0%,
    rgba(6,10,22,0.92) 28%,
    rgba(6,10,22,0.65) 52%,
    rgba(6,10,22,0.3) 72%,
    rgba(6,10,22,0) 100%
  );
  pointer-events:none;
}

@media (max-width:768px){
  .page-banner-downloads{
    height:420px;
  }
  .page-banner-downloads::after{
    height:55%;
  }
}




/* === Align Downloads banner exactly to bottom of top menu === */
/* Uses CSS variable fallback; safe even if header height changes */
:root{
    --menu-logo-max-width: 300px;        /* desktop bem maior */
    --menu-logo-max-width-mobile: 220px; /* mobile */
    --menu-logo-glow: 12px;
}

.page-banner-downloads{
  margin-top: 0;
}

@media (max-width: 768px){
  .page-banner-downloads{ margin-top: 0; }
}


/* === Downloads page premium layout === */
body{
  overflow-x: hidden;
}

.page-section {
  /* Global section rhythm (menu is not fixed) */
  padding: var(--section-pad-y, 72px) var(--section-pad-x, 20px);
  margin-top: 0;
}

.page-section > p{
  max-width: 820px;
  margin: 12px auto 26px;
  line-height: 1.75;
  opacity: 0.92;
  font-size: clamp(14px, 1.2vw, 16px);
}

/* dividers between sections */
.section-divider{
  max-width: 1100px;
  margin: 8px auto;
  padding: 0 20px;
}
.section-divider::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(191,163,126,0.35), transparent);
}

/* prevent cards from causing horizontal scroll */
.cards{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  gap: 18px;
}

/* Smaller video cards to avoid side scroll on narrow viewports */
#client-card.video-bg-card{ min-height: 260px; }
#patch-card.video-bg-card{ min-height: 280px; }

/* Essentials grid: centered and responsive */
.essential-grid{
  max-width: 1100px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (max-width: 1024px){
  .essential-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .page-section {
  /* Global section rhythm (menu is not fixed) */
  padding: var(--section-pad-y, 72px) var(--section-pad-x, 20px);
  margin-top: 0;
}
  .cards{
    padding: 0 16px;
    gap: 14px;
  }
  .essential-grid{
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}

/* === Fine Typography & Spacing (Downloads) === */
.downloads-section .section-title,
.essential-downloads .section-title{
  letter-spacing: 0.04em;
  font-size: clamp(26px, 2.6vw, 34px);
  margin: 0 auto 10px;
}

.downloads-section > p,
.essential-downloads > p{
  margin: 10px auto 28px;
}

/* More premium spacing inside video cards */
.video-bg-card{
  border-radius: 16px;
}

.video-bg-content{
  padding: 18px 18px 20px;
}

.video-bg-content h3{
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.video-bg-content p{
  margin: 0 0 14px;
  line-height: 1.6;
  opacity: 0.9;
}

/* Buttons: consistent height + spacing */
.button,
.button-secondary{
  padding: 10px 16px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.patch-actions{
  gap: 10px;
}

/* Essentials cards refinement */
.essential-item{
  border-radius: 14px;
  padding: 14px 14px;
}

.essential-text strong{
  font-size: 15px;
  letter-spacing: 0.01em;
}

.essential-text span{
  font-size: 13px;
  opacity: 0.9;
}

/* Important instructions block */
.important-instructions{
  margin-top: 34px;
  padding-top: 18px;
}

.important-instructions h3{
  letter-spacing: 0.04em;
  font-size: 16px;
  margin-bottom: 12px;
}

.important-instructions ul{
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.75;
}

.important-instructions li{
  margin: 10px 0;
  opacity: 0.92;
}

@media (max-width: 520px){
  .button,
  .button-secondary{
    width: 100%;
    text-align: center;
  }
  .patch-actions{
    flex-direction: column;
  }
}


/* === Construction page === */
.construction-wrap{
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  padding: 36px 20px 60px;
  text-align: center;
}
.construction-card{
  max-width: 720px;
  width: 100%;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(191,163,126,0.22);
  border-radius: 18px;
  padding: 34px 22px;
  backdrop-filter: none;
}
.construction-card h1{
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  font-size: clamp(28px, 3.2vw, 38px);
}
.construction-card p{
  margin: 0 auto 18px;
  max-width: 560px;
  line-height: 1.7;
  opacity: 0.92;
}

/* === WhatsApp invite (Downloads) === */
.wa-invite{
  max-width: 1100px;
  margin: 18px auto 22px;
  padding: 0 20px;
  box-sizing: border-box;
}
.wa-invite-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(191,163,126,0.22);
  backdrop-filter: none;
}
.wa-invite-text h3{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: 0.03em;
}
.wa-invite-text p{
  margin: 0;
  max-width: 720px;
  line-height: 1.65;
  opacity: 0.92;
}
.wa-button{ white-space: nowrap; }

@media (max-width: 768px){
  .wa-invite{ padding: 0 16px; }
  .wa-invite-inner{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .wa-button{
    width: 100%;
    text-align: center;
  }
}


/* === Fine tune banner vertical alignment (Downloads) === */
.page-banner-downloads{
  transform: none;
}



/* === Nav (Mobile) === */
@media (max-width: 768px) {
  nav {
    height: 96px;
    padding: 10px 16px;
    background-size: cover; /* slight crop is OK on mobile */
    background-position: center top;
  }

  .site-logo { height: 46px; }

  nav ul { gap: 10px; flex-wrap: wrap; justify-content: center; }

  nav li a {
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 12px;
  }
}

@media (max-width: 768px){
  .news-title-img,.news-orn-divider{
  width: 33%;
  max-width: 400px;
  height: 18px;
  margin: 0 auto 28px;
  position: relative;
}
.news-orn-divider::before,
.news-orn-divider::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 46%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(191,163,126,0), rgba(191,163,126,0.9), rgba(191,163,126,0));
  opacity: 0.95;
}
.news-orn-divider::before{left:0;}
.news-orn-divider::after{right:0;}
.news-orn-divider span{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(191,163,126,0.95);
  box-shadow: 0 0 0 3px rgba(191,163,126,0.18);
}
}

/* Home: Doações / Apoie */
.donations-home{
  padding-top: 0;
  padding-bottom: var(--section-gap-y);
}
.donations-home .donations-wrap{
  max-width: 1200px;
  margin: 0 auto;
}
.donations-home .donations-title{
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.5px;
  margin: 0 0 18px;
}
.donations-home .donations-sub{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 26px;
  opacity: 0.9;
}
.donations-home .donations-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.donations-home .don-card{
  border: 1px solid rgba(191,163,126,0.35);
  border-radius: 16px;
  background: rgba(4,14,41,0.55);
  box-shadow: 0 16px 40px var(--shadow-tint);
  padding: 22px;
  text-align: left;
}
.donations-home .don-card h3{
  margin: 0 0 10px;
  font-size: 20px;
}
.donations-home .don-card p{
  margin: 0 0 16px;
  opacity: 0.9;
}
.donations-home .don-card .button{
  display: inline-flex;
}
@media (max-width: 768px){
  .donations-home .donations-grid{grid-template-columns: 1fr;}
  .donations-home .donations-title{font-size: 22px;}
}


/* === Logo acima do menu principal (tamanho + hover glow) === */
:root{
    --menu-logo-max-width: 300px;        /* desktop bem maior */
    --menu-logo-max-width-mobile: 220px; /* mobile */
    --menu-logo-glow: 12px;
}

.menu-logo img,
.header-logo img,
.nav-logo img{
    max-width: var(--menu-logo-max-width);
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 12px auto;
    transition: transform 180ms ease, filter 220ms ease, opacity 220ms ease;
    will-change: transform, filter;
}

/* Hover / glow (desktop) */
@media (hover:hover) and (pointer:fine){
  nav .logo a:hover .site-logo,
  nav .logo:hover .site-logo{
    /* Apenas escala + glow (sem blur na imagem) */
    transform: scale(1.04);
    filter: drop-shadow(0 0 10px rgba(255, 190, 80, 0.65));
  }
}


/* === MENU LOGO: tamanho real + posição (DESKTOP) === */
nav{ position: relative; }

/* Container da logo */
nav .logo{
  position: absolute !important;
  left: 130px !important;   /* 130px da borda esquerda */
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 999 !important;
}

/* Imagem do logo */
nav .logo .site-logo,
nav .logo img.site-logo{
  height: 250px !important;  /* DESKTOP */
  width: auto !important;
  max-width: none !important;
}

/* Hover: apenas escala + glow (sem blur) */
@media (hover:hover) and (pointer:fine){
  nav .logo a:hover .site-logo,
  nav .logo:hover .site-logo{
    transform: scale(1.04);
    filter: drop-shadow(0 0 10px rgba(255, 190, 80, 0.65));
  }
}

/* Mobile */
@media (max-width: 768px){
  nav .logo{ left: 14px !important; }
  nav .logo .site-logo,
  nav .logo img.site-logo{
    height: 74px !important;
  }
}

/* Donate/VIP banner backgrounds */
.don-card:nth-child(1){
  background: url('assets/images/donate.png') center/cover no-repeat;
}
.don-card:nth-child(2){
  background: url('assets/images/sejavip.png') center/cover no-repeat;
}

/* Bigger banners */
.don-card{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
}

/* Hide titles (already present in the banners) */
.don-card h3{
  display: none;
}

/* Stronger dark navy gradient at the bottom */
.don-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to top, rgba(2, 8, 30, 0.98) 0%, rgba(2, 8, 30, 0.75) 35%, rgba(2, 8, 30, 0.0) 75%);
}

/* bring content above overlay */
.don-card > *{
  position: relative;
  z-index: 1;
}

/* Text brighter and centered at the bottom */
.don-card p{
  text-align: center;
  color: #f3f6ff;
  font-size: 15px;
  max-width: 90%;
  margin: 0 auto 14px;
  padding-right: 160px;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

/* Button on the right */
.don-card .button{
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
}


/* Item List (iframe) – aviso não destrutivo */
.itemlist-warn{
  position:absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(191,163,126,0.35);
  background: rgba(10,18,40,0.82);
  backdrop-filter: blur(10px);
  color: rgba(232,240,255,0.92);
  display:flex;
  flex-direction:column;
  gap: 2px;
  font-size: 13px;
  pointer-events:none;
}
.itemlist-warn strong{ font-weight: 900; color: #d7c6a2; }
.itemlist-warn span{ opacity: .8; }

/* Carnaval highlight (premium) */
.carnaval-highlight{
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  color: rgba(255, 240, 210, .95);
  letter-spacing: .4px;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
  background: linear-gradient(90deg,
    rgba(214,170,92,.12),
    rgba(255,255,255,.04),
    rgba(214,170,92,.12)
  );
  border: 1px solid rgba(214,170,92,.20);
  box-shadow: 0 0 0 1px rgba(214,170,92,.10), 0 12px 30px rgba(0,0,0,.35);
  overflow: hidden;
}

.carnaval-highlight::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width: 60%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,236,200,.35), transparent);
  filter: blur(0.5px);
  animation: carnavalShine 3.8s ease-in-out infinite;
  pointer-events:none;
  opacity:.85;
}

@keyframes carnavalShine{
  0%{ transform: translateX(-140%) rotate(18deg); opacity:0; }
  15%{ opacity:.9; }
  40%{ opacity:.6; }
  55%{ opacity:.0; }
  100%{ transform: translateX(260%) rotate(18deg); opacity:0; }
}

/* Slightly improve visibility of the top announcement line */
.top-announcement, .promo-strip, .promo-text{
  color: rgba(255, 240, 210, .85);
}