:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#7c3aed;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg),#071023 60%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.container{max-width:1280px;margin:0 auto;padding:1.25rem}

/* ==================================================
  Layout sections quick reference (edit here):
  - Variables (colors, accents): at the top (:root)
  - Header / Navigation styles: .site-header, .header-inner, .main-nav
  - Hero (title + subtitle): .hero, .hero-inner, .hero h2, .hero p
  - Cards / blocks: .cards, .card, .card-inner, .card-media, .card-body
  - Responsive breakpoints: near @media rules
  Edit the selectors below to change sizes, colors or spacing.
  ================================================== */
/* Header */
.site-header{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(4px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.logo{font-size:1.5625rem;margin:0;color:var(--accent)}
/* Logo image sizing: keeps the logo compact and responsive */
.site-logo{height:100px;max-height:120px;width:auto;display:block}
@media (max-width:640px){
  .site-logo{height:34px;max-height:40px}
}
/* Reduce heavy visuals on small screens for performance */
@media (max-width:420px){
  .hero-image{box-shadow:none}
  .card{box-shadow:none;border-radius:12px;padding:1rem}
}
.main-nav{display:flex;gap:.625rem}
.nav-link{color:var(--muted);text-decoration:none;padding:.5rem .75rem;border-radius:6px}
.nav-link:hover{background:var(--glass);color:#fff}
.nav-link.active{color:#fff}

/* Hero */
.hero{padding:4.375rem 0;background:linear-gradient(180deg, rgba(124,58,237,0.09), transparent)}
.hero-inner{text-align:center}
.hero h2{font-size:2rem;margin:.2rem 0}
.hero p{color:var(--muted);max-width:64ch;margin:0.5rem auto 1rem}

/* Banner inside hero: responsive, centered, and cropped nicely */
.hero-image{display:block;width:100%;max-width:1500px;height:auto;margin:1.25rem auto 0;border-radius:15px;object-fit:cover;box-shadow:0 18px 50px rgba(2,6,23,0.55)}
@media (min-width:1300px){
  .hero-image{max-width:1400px}
}

/* Make the hero title larger and more eye-catching */
.hero h2 {
  font-size: 3.75rem;
  line-height: 1.02;
  font-weight: 800;
  margin: .1rem 0 .5rem;
  letter-spacing: -0.5px;
  
  /* gradient text */
  background: linear-gradient(90deg, #a66cff, #6f42c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  overflow: visible;
  display: inline-block; 
}

.hero h3 {
  font-size: 3.0rem;
  line-height: 1.02;
  font-weight: 800;
  margin: .1rem 0 .5rem;
  letter-spacing: -0.5px;
  
  /* gradient text */
  background: linear-gradient(90deg, #a66cff, #6f42c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  overflow: visible;
  display: inline-block; 
}
.hero h3::after{
  content: '';
  display:block;
  width:280px;
  height:6px;
  margin:50px auto 0;
  border-radius:4px;
  background: linear-gradient(90deg, var(--accent), #4f46e5);
  opacity:0.95;
}
.hero h1 {
  font-size: 3.75rem;
  line-height: 1.2;
  font-weight: 800;
  margin: .1rem 0 .5rem;
  letter-spacing: -0.5px;
  
  /* gradient text */
  background: linear-gradient(90deg, #a66cff, #6f42c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  overflow: visible;
  display: inline-block; 
}

/* small decorative underline */
.hero h2::after{
  content: '';
  display:block;
  width:64px;
  height:6px;
  margin:12px auto 0;
  border-radius:6px;
  background: linear-gradient(90deg, var(--accent), #4f46e5);
  opacity:0.95;
}


/* small decorative underline */
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),#4f46e5);color:#fff;padding:.75rem 1.25rem;border-radius:12px;text-decoration:none;box-shadow:0 8px 22px rgba(79,70,229,0.2);transition:transform .14s ease, box-shadow .14s ease}
.btn:hover{transform:translateY(-3px)}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* Cards grid (ainda maior) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(650px,1fr));gap:1.875rem;padding:3.125rem 0}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:2.1875rem;border-radius:20px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 18px 50px rgba(2,6,23,0.7)}
.card h3{margin-top:.5rem;font-size:1.5625rem}
.card-image{width:100%;height:auto;border-radius:15px;display:block}

/* Block layout for cards: media + body */
.card-inner{display:flex;gap:1.875rem;align-items:center}
.card-media{flex:0 0 400px}
.card-media {width:400px;height:250px;object-fit:cover;border-radius:15px}
.card-media1 {width:400px;height:350px;object-fit:cover;border-radius:15px}
.card-image{width:400px;height:250px;object-fit:cover;border-radius:15px}
.card-image1{width:400px;height:350px;object-fit:cover;border-radius:15px}
.card-body{flex:1}

/* Support alternating layout: reverse the order */
.card-inner.reverse{flex-direction:row-reverse}

@media (max-width:720px){
  .card-inner{flex-direction:column;align-items:flex-start}
  .card-inner.reverse{flex-direction:column;align-items:flex-start}
  .card-media{flex:0 0 auto}
  .card-media .card-image{width:100%;height:auto}
  /* Reduce image height on small devices to save bandwidth and layout cost */
  .card-media, .card-media1, .card-image, .card-image1 { width:100%; max-height:360px; }
}

/* Form */
.compact-form{display:flex;flex-direction:column;gap:.6rem}
.compact-form label{display:flex;flex-direction:column;color:var(--muted);font-size:.95rem}
.compact-form input[type="text"]{padding:.5rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.checkboxes{display:flex;gap:.6rem;margin:.4rem 0}

/* Table */
.small-table{width:100%;border-collapse:collapse;margin-top:.5rem}
.small-table th,.small-table td{padding:.5rem;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03)}

/* Footer */
.site-footer{padding:1.2rem 0;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .cards{grid-template-columns:1fr}
  /* Reduce hero and heading sizes on small screens for better fit */
  .hero h1 { font-size: 1.8rem; line-height: 1.15; }
  .hero h2 { font-size: 1.25rem; line-height: 1.2; }
  .hero h3 { font-size: 1.35rem; line-height: 1.15; }
  .hero h2::after{width:48px;height:5px}
  /* Card headings slightly smaller on mobile */
  .card h3 { font-size: 1.125rem; }
  /* Smaller paddings on mobile */
  .container{padding:.75rem}
  .btn{padding:.5rem .9rem}
}

/* Cenas para Card */
@media (prefers-reduced-motion: reduce){
  .btn, .card { transition: none !important; }
}

/* Small polish */
a{color:inherit}
button.btn{cursor:pointer}

/* Pesquisa e cenas de Search Bar */
.search-wrap{position:relative;display:flex;align-items:center;gap:.5rem}
#site-search{padding:.56rem .75rem;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:inherit;min-width:250px}
.search-results{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:var(--card);border:1px solid rgba(255,255,255,0.04);border-radius:8px;box-shadow:0 8px 30px rgba(2,6,23,0.6);z-index:1000;display:none;max-height:320px;overflow:auto;padding:.5rem}
.search-result{display:block;padding:.5rem;border-radius:6px;color:inherit;text-decoration:none}
.search-result:hover{background:rgba(255,255,255,0.02)}
.muted{color:var(--muted);font-size:.9rem}
.no-results{padding:.5rem;color:var(--muted)}

/* Paginação */
.pagination, #pagination{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;margin-bottom:2rem}
#pagination button{padding:.5rem .75rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}
#pagination button.btn{background:linear-gradient(90deg,var(--accent),#4f46e5);color:#fff;border:none}

/* Cenas da Equi+a */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.team-member {
  text-align: center;
}

.team-member img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.team-member h4 {
  margin: 0.5rem 0;
  font-size: 1.125rem;
}

.team-member .role {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.team-member .comment {
  font-size: 0.9rem;
}

.manga-image {
  width: 100%;
  height: auto;
  max-width: 306px;
  max-height: 407px;
  object-fit: cover;
  border-radius: 15px;
}

.manga-card-media {
  flex: 0 0 auto;
  width: 100%;
  max-width: 306px;
}

.buy-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.volume-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.25rem;
  justify-content: center;
}

.btn-volume {
  display: inline-block;
  background: var(--glass);
  color: var(--muted);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0.25rem;
  font-size: 0.9rem;
}

.btn-volume:hover {
  background: var(--accent);
  color: #fff;
}

/* Mobile optimizations */
@media (max-width: 720px) {
  .card-inner {
    gap: 1rem;
  }
  
  .manga-card-media {
    margin: 0 auto;
  }
  
  .card .muted {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .volume-buttons {
    gap: 0.35rem;
  }
  
  .btn-volume,
  .btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .manga-image {
    max-height: 350px;
  }
  
  .card {
    padding: 1rem;
  }
  
  .card-body {
    text-align: center;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .manga-image,
  .btn-volume,
  .btn {
    transition: none !important;
  }
}
.language-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 1000;
}

.lang-btn {
  background-color: var(--primary);
  color: white;
  padding: 0.5rem;
  border-radius: 50%;
  text-decoration: none;
  font-weight: bold;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lang-btn.active {
  background-color: var(--accent);
}
.container-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

@media (max-width: 720px) {
  .container-form {
    width: 100%;
    padding: 0.5rem;
  }
  .container-form iframe {
    width: 100% !important;
    height: 100vh !important;
  }
}

/* RP Awards Page Specific Styles */