/* CSS extracted from index (2).html <style> block */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  background-color: #fef5f6;
  line-height: 1.6;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  /* background removido: agora só no header .container */
}

header .container {
  background: #0039de;
}

@media (min-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }


/* ==================== HEADER ==================== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #0039de;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

header .container {
  position: relative;
}

.header-canto {
  position: absolute;
  bottom: 0;
  right: 0;
  height: auto;
  width: auto;
  max-height: 100%;
  z-index: 0;
  opacity: 0.9;
  display: block;
}

@media (max-width: 767px) {
  .header-canto {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 40px;
    width: auto;
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

/* Make header-content span the full visible width of header.container
   compensate for .container horizontal padding so header appears flush */
header .header-content {
  box-sizing: border-box;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  header .header-content {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  header .header-content {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.logo-section { display: flex; align-items: center; gap: 0.5rem; }

.logo-img { width: auto; height: 50px; display: block; transition: transform 200ms ease; transform-origin: left center; }

@media (min-width: 768px) {
  .logo-img { height: 54px; }
}

/* Visual scale do logo sem alterar o fluxo/layout do header */
.logo-img.scaled { transform: scale(1.12); }
@media (min-width: 768px) {
  .logo-img.scaled { transform: scale(1.18); }
}

.logo-text { font-size:1.25rem; font-weight:bold; color:#ffffff; display:none; }
@media (min-width: 640px) { .logo-text { display:inline; } }

nav#nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-left: auto;
  background: #0039de;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 0 0 1rem 1rem;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 2rem 2rem 2rem;
  max-width: 320px;
  z-index: 100;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}
nav#nav-menu.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px) {
  nav#nav-menu {
    position: static;
    display: flex !important;
    flex-direction: row;
    gap: 2rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    opacity: 1;
    visibility: visible;
    margin-right: 4rem;
  }
}

nav#nav-menu a {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}
nav#nav-menu a:hover {
  color: #0039de;
  background: #fff;
}
nav#nav-menu a.active {
  color: #0039de;
  background: #fff;
}

.menu-toggle {
  display: none;
  background: #0039de;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 101;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: background 0.2s, color 0.2s;
}
@media (max-width: 767px) {
  .menu-toggle { display: block; }
}

/* ==================== BANNER SLIDER ==================== */
.banner-slider { position:relative; width:100vw; height:22rem; margin:0 calc(-50vw + 50%); overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.1); }
@media (min-width:768px){ .banner-slider { height: 27rem; } }

.banner { position:absolute; inset:0; opacity:0; transition:opacity 1s ease-in-out; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1rem; color:white; }
.banner.active { opacity:1; }
.banner::before { content:''; position:absolute; inset:0; background-color: rgba(0,0,0,0.3); z-index:1; }
.banner-content { position:relative; z-index:2; }
.banner h2 { font-size:1.875rem; margin-bottom:0.5rem; }
@media (min-width:768px){ .banner h2 { font-size:3rem; } }
.banner p { font-size:1rem; margin-bottom:1.5rem; max-width:42rem; opacity:0.9; }
@media (min-width:768px){ .banner p { font-size:1.125rem; } }
.banner-btn { padding:0.75rem 1.5rem; background-color:white; color:#0052CC; border:none; border-radius:0.5rem; font-weight:600; cursor:pointer; transition:background-color 0.3s; }
.banner-btn:hover { background-color:#f3f4f6; }
.banner-nav { position:absolute; top:50%; transform:translateY(-50%); background-color:rgba(255,255,255,0.8); border:none; padding:0.5rem; border-radius:50%; cursor:pointer; z-index:10; transition:background-color 0.3s; }
.banner-nav:hover { background-color:white; }
.banner-nav.prev { left:1rem; }
.banner-nav.next { right:1rem; }
.banner-indicators { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:0.5rem; z-index:10; }
.indicator { width:0.75rem; height:0.75rem; border-radius:50%; background-color:rgba(255,255,255,0.5); border:none; cursor:pointer; transition:all 0.3s; }
.indicator.active { background-color:white; width:2rem; }

/* ==================== CARROSSEL ==================== */
.carrossel-container { width: 100vw; margin: 0 calc(-50vw + 50%); overflow: hidden; height: auto; }
.carrossel-track { display: flex; width: 200%; animation: scroll-left 30s linear infinite; height: auto; }
.carrossel-img { width: 50%; height: auto; display: block; flex-shrink: 0; object-fit: contain; }
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 480px) {
  .carrossel-container { height: 40vh; }
  .carrossel-track { height: 100%; }
  .carrossel-img { height: 100%; object-fit: contain; object-position: center; width: auto; }
}

/* ==================== VIDEOS SECTION ==================== */
.videos-section { padding:1.5rem 0 4rem 0; background-color:#fef5f6; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-header h2 { margin-bottom:1rem; }
.section-header p { font-size:1.125rem; color:#6b7280; max-width:42rem; margin:0 auto; }
.videos-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 380px)); gap:2rem; justify-content:center; }
@media (min-width:768px) { .videos-grid { grid-template-columns:repeat(auto-fit, minmax(300px, 380px)); } }
.video-card { text-align: center; }
.video-card { cursor:pointer; transition:transform 0.3s; }
.video-card:hover { transform:translateY(-0.25rem); }
.video-thumbnail { position:relative; overflow:hidden; border-radius:0.5rem; box-shadow:0 4px 6px rgba(0,0,0,0.1); margin-bottom:1rem; height:12rem; background-color:#d1d5db; display:flex; align-items:center; justify-content:center; }
.video-thumbnail::before { content:''; position:absolute; inset:0; background-color:rgba(0,0,0,0.3); opacity:0; transition:opacity 0.3s; }
.video-card:hover .video-thumbnail::before { opacity:1; }
.play-icon { position:absolute; font-size:3rem; color:white; opacity:0; transition:opacity 0.3s; z-index:2; }
.video-card:hover .play-icon { opacity:1; }
.video-thumbnail.has-poster { background-size:cover; background-position:center; background-color:transparent; }

.modal-content .video-wrapper { position:relative; padding:0; display:flex; align-items:center; justify-content:center; }
.video-modal-close { position:absolute; top:0.5rem; right:0.5rem; z-index:4; background:rgba(0,0,0,0.5); color:white; border:none; padding:0.5rem 0.65rem; border-radius:0.35rem; cursor:pointer; font-size:1.1rem; }
/* When modal is focused on video: remove internal scrollbar and let the video define size
   - transparent background so the page backdrop (modal-backdrop) provides dimming
   - constrain by viewport (95vw / 95vh) so it never overflows the screen
*/
.modal-content.video-focused {
  background: transparent;
  padding: 0;
  max-width: 95vw;
  max-height: 95vh;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}
.modal-content.video-focused .video-wrapper { padding: 0; }
.modal-content.video-focused video { display:block; width:auto; height:auto; max-height:95vh; max-width:95vw; border-radius:0.5rem; }
.video-card h3 { font-size:1.125rem; margin-bottom:0.5rem; }
.video-card p { font-size:0.875rem; color:#6b7280; }

/* ==================== DOCTOR AI + TESTIMONIALS ==================== */
.doctor-testimonials { padding:4rem 0; background-color:white; }
.two-columns { display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1024px){ .two-columns { grid-template-columns:1fr 1fr; } }
.doctor-section h3, .testimonials-section h3 { font-size:1.5rem; margin-bottom:1rem; }
.doctor-section p, .testimonials-section p { color:#6b7280; margin-bottom:2rem; }
.tips-list { display:flex; flex-direction:column; gap:1.5rem; }
.tip-card { padding:1.5rem; background:linear-gradient(to right, #eff6ff, #f0fdf4); border-radius:0.5rem; border-left:4px solid #0052CC; transition:box-shadow 0.3s; }
.tip-card:hover { box-shadow:0 10px 15px rgba(0,0,0,0.1); }
.tip-card h4 { font-size:1.125rem; margin-bottom:0.5rem; }
.tip-card p { font-size:0.875rem; color:#6b7280; margin:0; }
.testimonial-card { background-color:white; border-radius:0.5rem; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:2rem; border-left:4px solid #0052CC; }
.testimonial-author { display:flex; gap:1rem; margin-bottom:1rem; }
.testimonial-avatar { width:5rem; height:5rem; border-radius:50%; background-color:#e5e7eb; flex-shrink:0; }
.testimonial-info h4 { font-size:1.125rem; margin-bottom:0.25rem; }
.testimonial-info p { font-size:0.875rem; color:#6b7280; margin:0; }
.testimonial-text { font-size:1rem; font-style:italic; margin-bottom:1rem; color:#1a1a1a; }
.testimonial-nav { display:flex; align-items:center; justify-content:space-between; }
.testimonial-nav button { background:none; border:none; padding:0.5rem; cursor:pointer; transition:background-color 0.3s; }
.testimonial-nav button:hover { background-color:#dedede; border-radius:50%; }
.testimonial-indicators { display:flex; gap:0.5rem; }
.testimonial-indicator { width:0.5rem; height:0.5rem; border-radius:50%; background-color:#cacaca; border:none; cursor:pointer; transition:all 0.3s; }
.testimonial-indicator.active { background-color:#0052CC; width:1.5rem; }

/* ==================== HEART BEAT (Depoimento) ==================== */
/* Animação de batimento para a imagem de depoimento
   - usa um ritmo leve com dois batimentos rápidos por ciclo
   - inclui fallback para prefers-reduced-motion */
.heart-beat, img[src*="depoimento.png"] {
  display: inline-block;
  transform-origin: center center;
  animation: heart-beat 1.2s ease-in-out infinite;
}

@keyframes heart-beat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.18); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.1); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .heart-beat, img[src*="depoimento.png"] {
    animation: none !important;
    transform: none !important;
  }
}

/* ==================== NEWS SECTION ==================== */
.news-section { padding:4rem 0; background-color:white; }
.news-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px){ .news-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .news-grid { grid-template-columns:repeat(3,1fr); } }
.news-card { border-radius:0.5rem; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:box-shadow 0.3s; cursor:pointer; }
.news-card:hover { box-shadow:0 10px 15px rgba(0,0,0,0.1); }
.news-image { width:100%; height:12rem; background-color:#d1d5db; position:relative; overflow:hidden; }
.news-category { position:absolute; top:1rem; left:1rem; background-color:#0052CC; color:white; padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.75rem; font-weight:600; z-index:2; }
.news-content { padding:1.5rem; }
.news-date { display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; color:#6b7280; margin-bottom:0.75rem; }
.news-card h3 { font-size:1.125rem; margin-bottom:0.75rem; transition:color 0.3s; }
.news-card:hover h3 { color:#0052CC; }
.news-card p { font-size:0.875rem; color:#6b7280; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-clamp:2; }
.read-more { display:flex; align-items:center; gap:0.5rem; color:#0052CC; font-weight:600; font-size:0.875rem; text-decoration:none; transition:gap 0.3s; }
.news-card:hover .read-more { gap:0.75rem; }

/* Carrossel de Notícias */
.news-carousel-wrapper { position:relative; max-width:1200px; margin:0 auto; padding:0 3.5rem; }
.news-carousel { overflow:hidden; }
.news-carousel-track { display:flex; transition:transform 0.5s ease; }
.news-carousel-item { flex:0 0 calc(33.333% - 1.33rem); margin-right:2rem; }
@media (max-width:1024px){ .news-carousel-item { flex:0 0 calc(50% - 1rem); } }
@media (max-width:768px){ .news-carousel-item { flex:0 0 100%; margin-right:0; } }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:#0039de; color:white; border:none; width:3rem; height:3rem; border-radius:50%; font-size:2rem; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:background 0.3s, transform 0.3s; box-shadow:0 4px 10px rgba(0,0,0,0.2); }
.carousel-btn:hover { background:#002ba8; transform:translateY(-50%) scale(1.1); }
.carousel-prev { left:0; }
.carousel-next { right:0; }
.carousel-indicators { display:flex; justify-content:center; gap:0.5rem; margin-top:2rem; }
.carousel-indicator { width:0.75rem; height:0.75rem; border-radius:50%; background:#d1d5db; cursor:pointer; transition:background 0.3s, transform 0.3s; }
.carousel-indicator.active { background:#0039de; transform:scale(1.3); }

/* ==================== FOOTER ==================== */
footer { background:linear-gradient(to right, #003d99, #0052CC); color:white; padding:3rem 0 1rem; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:3rem; }
@media (min-width:768px){ .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer-grid { grid-template-columns:repeat(4,1fr); } }
.footer-section h4 { font-size:1.125rem; margin-bottom:1rem; }
.footer-logo-heading { margin: 0; }
.footer-logo { display:block; width:auto; height:56px; }
@media (min-width:768px) { .footer-logo { height:64px; } }

.footer-section p { font-size:0.875rem; color:rgba(255,255,255,0.8); margin:0; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:0.5rem; }
.footer-links a { color:rgba(255,255,255,0.8); text-decoration:none; font-size:0.875rem; transition:color 0.3s; }
.footer-links a:hover { color:white; }
.footer-contact { display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; color:rgba(255,255,255,0.8); margin-bottom:0.75rem; }
.footer-buttons { display:flex; flex-direction:column; gap:0.75rem; }
.footer-btn { padding:0.5rem 1rem; border:none; border-radius:0.5rem; font-weight:600; cursor:pointer; font-size:0.875rem; transition:all 0.3s; }
.footer-btn.secondary { background-color:rgba(255,255,255,0.2); color:white; }
.footer-btn.secondary:hover { background-color:rgba(255,255,255,0.3); }
.footer-btn.primary { background-color:white; color:#0052CC; }
.footer-btn.primary:hover { background-color:#f3f4f6; }
/* Make the FAQ footer buttons match the primary button size (full width) */
.footer-faq-static > div .footer-btn {
  width: 100%;
  box-sizing: border-box;
}
.footer-divider { border-top:1px solid rgba(255,255,255,0.2); padding-top:2rem; margin-top:2rem; }
.footer-bottom { display:flex; flex-direction:column; gap:1rem; font-size:0.875rem; color:rgba(255,255,255,0.8); }
@media (min-width:768px){ .footer-bottom { flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { color:rgba(255,255,255,0.8); text-decoration:none; transition:color 0.3s; }
.footer-legal a:hover { color:white; }

/* ==================== MODAL ==================== */
.modal { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:1rem; }
.modal.active { display:flex; }
.modal-backdrop { position:absolute; inset:0; background-color:rgba(0,0,0,0.5); }
.modal-content { position:relative; background-color:white; border-radius:0.5rem; box-shadow:0 20px 25px rgba(0,0,0,0.15); max-width:42rem; width:100%; margin:0.5rem; max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid #e5e7eb; position:sticky; top:0; background-color:white; }
.modal-header h2 { margin:0; }
.modal-close { background:none; border:none; font-size:1.5rem; cursor:pointer; transition:background-color 0.3s; padding:0.25rem; border-radius:0.25rem; }
.modal-close:hover { background-color:#f3f4f6; }
.modal-body { padding:1.5rem; }

/* ==================== DESAFIO MODAL (conteúdo formatado) ==================== */
.desafio-modal { color: #111827; padding: 0; }
.desafio-modal h2 { font-size: 1.5rem; margin: 0 0 0.75rem 0; }
.desafio-modal h3 { font-size: 1.125rem; margin: 1rem 0 0.5rem 0; }
.desafio-modal p { font-size: 0.975rem; margin-bottom: 0.75rem; }
.desafio-modal ul { margin: 0 0 0.75rem 0; padding-left: 1.25rem; }
.desafio-modal li { margin-bottom: 0.5rem; line-height: 1.5; }
.desafio-modal ul li::marker { font-weight: 600; color: inherit; }

/* Ajuste para que o parágrafo final (o 'Parabéns') tenha o mesmo tamanho visual dos tópicos */
.desafio-modal p:last-of-type { font-size: 1.125rem; font-weight: 600; margin-top: 0.75rem; }

/* ==================== KIT MODAL (layout customizado) ==================== */
.kit-modal-wrapper { display: flex; flex-direction: column; height: 100%; }
.kit-modal-header { flex-shrink: 0; }
.kit-modal-image { flex-shrink: 0; }
.kit-modal-content { flex: 1; overflow-y: auto; }
.kit-modal-footer { flex-shrink: 0; }



/* ==================== UTILITIES ==================== */
.section { padding:4rem 0; }

/* ==================== FAQ MODAL ==================== */
.faq-menu { display:flex; gap:1rem; flex-direction:column; }
@media (min-width:600px) { .faq-menu { flex-direction:row; } }
.faq-card { flex:1; background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid #e6edf3; padding:1.25rem; border-radius:0.5rem; cursor:pointer; display:flex; gap:0.75rem; align-items:flex-start; transition:transform 0.18s, box-shadow 0.18s; }
.faq-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(16,24,40,0.08); }
.faq-card h4 { margin:0; font-size:1rem; }
.faq-card p { margin:0; color:#6b7280; font-size:0.9rem; }
.faq-content { color: #111827; padding: 0.5rem 0; }
.faq-back { margin-top:1rem; display:inline-block; background:none; border:1px solid #e6edf3; padding:0.5rem 0.75rem; border-radius:0.375rem; cursor:pointer; }

/* Footer FAQ static area */
.footer-faq-static { color: white; }
.footer-faq-static .footer-btn.secondary { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.12); }
.footer-faq-static .footer-btn.secondary:hover { background: rgba(255,255,255,0.18); }

/* FAQ list inside modal */
.faq-list { display:flex; flex-direction:column; gap:0.5rem; }
.faq-item { background:#fafafa; border:1px solid #e6edf3; padding:0.75rem 1rem; border-radius:0.5rem; cursor:pointer; }
.faq-item .faq-question { font-weight:600; }
.faq-item .faq-answer { margin-top:0.5rem; display:none; color:#374151; }
.faq-item.open .faq-answer { display:block; }
.text-center { text-align:center; }
.mt-4 { margin-top:1rem; }
.mb-4 { margin-bottom:1rem; }

/* ==================== FOOTER REALIZADORES ==================== */
.footer-realizadores { padding:1.5rem 0 0.5rem; margin-top:1.5rem; text-align:left; }
.footer-realizadores h4 { color:rgba(255,255,255,0.9); margin-bottom:1rem; font-size:1.125rem; }
.realizadores-logos { display:flex; gap:1.5rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.realizadores-logos img { height:auto; width:auto; display:block; filter:grayscale(0); opacity:0.95; }
.realizadores-logos img.realizador.argos { height:60px; }
.realizadores-logos img.realizador.funrio { height:60px; }
.realizadores-logos img.realizador.citinova { height:60px; }
@media (min-width:768px) {
  .realizadores-logos img.realizador.argos { height:70px; }
  .realizadores-logos img.realizador.funrio { height:70px; }
  .realizadores-logos img.realizador.citinova { height:70px; }
}

/* Efeito de destaque (pequeno salto) nas logos dos realizadores */
.realizadores-logos img {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, filter 220ms ease;
  will-change: transform;
}
.realizadores-logos img:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  filter: none;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .realizadores-logos img,
  .realizadores-logos img:hover {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* VLibras plugin z-index helper to avoid being encoberto */
.vw-plugin-wrapper { z-index: 2147483000 !important; }
.vw-access-button { z-index: 2147483001 !important; }

  /* ==================== BACK TO TOP BUTTON ==================== */
  #back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.75rem;
    background-color: #0039de;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 999;
  }
  #back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }