:root{
  --bg:#0f1115;
  --bg-soft:#141823;
  --card:#171b26;
  --text:#e9eef7;
  --muted:#9aa3b2;
  --brand:#705cfc;
  --brand-2:#00e0b8;
  --line:#263042;
  --danger:#ff5876;
  --success:#22c55e;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text); background:linear-gradient(180deg,#0b0d12 0%, var(--bg) 100%);
  /* espaço compensado via JS, mas deixa um fallback */
  padding-top:72px;
}

/* Containers & sections */
.container{ width:min(1160px, 92%); margin:0 auto }
.section{ padding:56px 0 }
.section-alt{ padding:56px 0; background:linear-gradient(180deg,var(--bg) 0%, var(--bg-soft) 100%) }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.section-head h3{ margin:0; font-size:1.6rem }
.link-more{ color:var(--brand-2); text-decoration:none; font-weight:600 }
.muted{ color:var(--muted) }

/* Header fixo (sempre fixo no topo) */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(15,17,21,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
}
@media (max-width: 960px){
  /* no celular, fundo sólido (sem transparência) */
  .site-header{ background:#0f1115; backdrop-filter:none }
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:72px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text) }

/* Logo retangular e maior */
.brand-logo{
  width:160px; height:48px; box-shadow:var(--shadow)
}
@media (max-width: 960px){
  .brand-logo{ width:140px; height:44px }
}
.brand-text{ font-weight:700; letter-spacing:.3px }

/* ===== Menu Desktop alinhado com logo e CTA ===== */
.main-nav{ display:flex; align-items:center; height:72px }
.main-nav ul{ list-style:none; display:flex; align-items:center; gap:22px; margin:0; padding:0 }
.main-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 10px;
  color:var(--text); text-decoration:none; opacity:.85; transition:.2s;
}
.main-nav a:hover{ opacity:1; color:#fff }

/* === CTA do menu: Área do Cliente (desktop + mobile) === */
.btn-outline{
  --b:1.5px;
  --r:999px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  min-height:40px;
  border-radius:var(--r);
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  color:var(--text);
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    linear-gradient(90deg, var(--brand), var(--brand-2)) border-box;
  border: var(--b) solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition: background .2s, color .2s, transform .12s ease, box-shadow .2s, border-color .2s;
}
.btn-outline:hover{
  color:#0b0d12;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color: transparent;
  box-shadow:0 10px 24px rgba(112,92,252,.35);
  transform: translateY(-1px);
}
.btn-outline:active{ transform:translateY(0) }
.btn-outline:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
}
/* Ajustes de contexto */
.main-nav .btn-outline{ margin-left:6px }
.btn-outline i{ color:#fff }

/* Hamburger & offcanvas */
.hamburger{
  display:none; width:40px; height:40px; background:none; border:0; cursor:pointer;
}
.hamburger span{
  display:block; height:2px; background:#fff; margin:8px 5px; border-radius:3px; transform-origin:8px 1px; transition:.25s;
}

/* Offcanvas padrão (mobile) */
.offcanvas{
  position:fixed; inset:0 0 0 auto; width:min(80%, 360px);
  background:var(--bg-soft); transform:translateX(100%); transition:.35s; z-index:110;
  box-shadow: -24px 0 50px rgba(0,0,0,.45);
}
.offcanvas.open{ transform:none }
.offcanvas-header{ display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid var(--line) }
.offcanvas-title{ font-weight:700 }
.offcanvas-close{ font-size:28px; line-height:1; background:none; color:#fff; border:0; cursor:pointer }
.offcanvas-nav{ display:grid; gap:8px; padding:18px }
.offcanvas-nav a{ display:block; padding:12px 14px; border-radius:12px; color:#fff; text-decoration:none; background:#1b2232 }
.offcanvas-nav a:hover{ background:#222b3e }
.offcanvas-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:105;
}

/* GARANTIR que offcanvas/hamburger NÃO apareçam no desktop */
@media (min-width: 961px){
  .offcanvas, .offcanvas-backdrop{ display:none !important }
}

/* Responsividade do menu */
@media (max-width: 960px){
  .main-nav{ display:none }
  .hamburger{ display:block }
  /* CTA no mobile: preenchido em degradê e ícone escuro */
  .offcanvas-nav .btn-outline{
    width:100%; margin-top:8px; text-align:center;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#0b0d12; border-color:transparent; box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  .offcanvas-nav .btn-outline i{ color:#0b0d12 }
}

/* Hero carousel */
.hero{ padding-top:18px }
.carousel{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow) }
.carousel-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition:transform .4s ease }
.slide{ position:relative; height:54vh; min-height:320px; max-height:640px }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05) }
.slide-caption{
  position:absolute; inset:auto 0 10% 0; display:grid; place-items:center; text-align:center; padding:0 18px;
}
.slide-caption h2{ margin:0 0 8px; font-size:clamp(1.4rem, 3vw, 2.2rem) }
.slide-caption p{ margin:0 0 14px; color:#eaeefecc }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,.35);
  width:46px; height:46px; border-radius:999px; color:#fff; cursor:pointer; display:grid; place-items:center;
}
.carousel-btn:hover{ background:rgba(0,0,0,.55) }
.carousel-btn.prev{ left:14px } .carousel-btn.next{ right:14px }
.carousel-dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:8px }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer }
.carousel-dots button[aria-selected="true"]{ background:#fff }

/* Buttons */
.btn{
  display:inline-block; background:linear-gradient(90deg, var(--brand) 0%, #a293ff 100%);
  color:#0b0d12; font-weight:700; padding:12px 18px; border-radius:14px; text-decoration:none;
  box-shadow:0 8px 18px rgba(112,92,252,.35);
}
.btn:hover{ transform:translateY(-1px) }
.btn-sm{ padding:8px 12px; font-size:.95rem }
.btn-text{ color:var(--brand-2); text-decoration:none; font-weight:600 }

/* Grids & Cards */
/* 👉 5 colunas desktop; 2 colunas no celular */
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1280px){ .grid{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 1024px){ .grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 720px){ .grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px){ .grid{ grid-template-columns: repeat(2, 1fr) } }

.cards .card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
}
.card-media{ position:relative; aspect-ratio:2/3; background:#0b0d12 }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block }

/* Botão de compra mais largo (100%) */
.btn-purchase{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 16px;
  font-weight:700;
}
.card-actions .btn-purchase{ flex:1; }

/* Link/overlay do trailer com ícone play */
.trailer-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}
.play-badge{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:64px; height:64px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.65);
  display:grid; place-items:center;
  font-size:26px; line-height:1; color:#fff;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  pointer-events:none;
  z-index:1;
}
.trailer-link:hover .play-badge{
  background:rgba(0,0,0,.75);
  border-color:#fff;
  transform:translate(-50%, -50%) scale(1.05);
}

/* Classificação indicativa (cores por faixa etária) */
.rating{
  position:absolute; top:10px; right:10px;
  padding:4px 10px; border-radius:12px; font-size:.85rem; font-weight:800; color:#0b0d12; border:1px solid rgba(0,0,0,.25);
  background:#fff;
  z-index:2;
}
.rating-L{ background:#2ecc71; color:#082b17 }
.rating-10{ background:#3498db; color:#081f36 }
.rating-12{ background:#f1c40f; color:#2b2200 }
.rating-14{ background:#e67e22; color:#2b1605 }
.rating-16{ background:#e74c3c; color:#2b0805 }
.rating-18{ background:#2c3e50; color:#e9eef7 }

/* Selo base e “Lançamento” em degradê vermelho */
.label{
  position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:12px; font-size:.85rem; font-weight:800; color:#291a00;
  background:linear-gradient(90deg,#ffd54f,#ffb300);
  border:1px solid rgba(0,0,0,.25);
  z-index:2;
}
.label-lancamento{
  background: linear-gradient(90deg, #ff4d4f, #d9363e);
  color:#fff;
  border-color: rgba(0,0,0,.25);
}

/* Tag Em breve */
.tag{
  position:absolute; top:10px; left:10px; background:var(--brand); color:#0b0d12;
  padding:4px 8px; border-radius:10px; font-weight:700; font-size:.8rem;
  z-index:2;
}

.card-body{ padding:14px }
.card-body h4{ margin:0 0 6px }
.card-body p{ margin:0; color:var(--muted) }
.card-actions{ margin-top:12px; display:flex; gap:10px }

/* Carrosséis horizontais */
.cards-carousel, .gallery-carousel, .promos-carousel{
  display:grid; grid-auto-flow:column; gap:var(--gap, 16px);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.cards-carousel > *, .gallery-carousel > *, .promos-carousel > *{ scroll-snap-align:start }
.cards-carousel::-webkit-scrollbar, .gallery-carousel::-webkit-scrollbar, .promos-carousel::-webkit-scrollbar{ height:8px }
.cards-carousel::-webkit-scrollbar-thumb, .gallery-carousel::-webkit-scrollbar-thumb, .promos-carousel::-webkit-scrollbar-thumb{ background:#2a3245; border-radius:8px }

/* Promoções: imagens quadradas */
.promos-carousel{ grid-auto-columns:calc(25% - 12px) }
.promos-carousel img{
  width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:14px; border:1px solid var(--line)
}

/* Galeria */
.gallery-carousel{ --gap:12px; grid-auto-columns:calc(25% - 12px) }
.gallery-carousel img{
  width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid var(--line)
}

/* Responsivo dos carrosséis horizontais */
@media (max-width: 1024px){
  .promos-carousel, .gallery-carousel{ grid-auto-columns:calc(33.333% - 10px) }
}
@media (max-width: 720px){
  .promos-carousel, .gallery-carousel{ grid-auto-columns:calc(50% - 8px) }
}
@media (max-width: 480px){
  .promos-carousel, .gallery-carousel{ grid-auto-columns:100% }
}

/* Formulário */
.contact-form{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px }
.form-row{ display:flex; gap:14px; flex-wrap:wrap }
.form-field{ flex:1; display:flex; flex-direction:column; gap:6px }
.form-field.full{ flex-basis:100% }
label{ font-weight:600 }
input, textarea{
  background:#0d121c; border:1px solid #1e2738; color:var(--text);
  border-radius:12px; padding:12px 14px; outline:none;
}
input:focus, textarea:focus{ border-color:var(--brand) }

/* ===== Footer (estrutura base) ===== */
.site-footer{ border-top:1px solid var(--line); background:#0b0d12; padding:36px 0 }
.footer-grid{
  display:grid; gap:24px; grid-template-columns: 2fr 1fr 1fr;
}
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.footer-links a{ color:var(--muted); text-decoration:none }
.footer-links a:hover{ color:#fff }

.sub-footer{
  text-align:center; padding:12px; font-size:.9rem; color:#a9b2c3;
  border-top:1px solid var(--line); background:#090c10;
}

/* ===== Footer — layout 4 colunas + conteúdo ===== */
.footer-grid.footer-4{
  display:grid;
  gap:24px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media (max-width: 1024px){
  .footer-grid.footer-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid.footer-4{ grid-template-columns: 1fr; }
}

/* listas de contato */
.contact-list{
  list-style:none; margin:0; padding:0; display:grid; gap:8px;
}
.contact-list li{ display:flex; align-items:flex-start; gap:10px }
.contact-list .ci{
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:8px; background:#1a2130; border:1px solid var(--line);
  font-size:14px; line-height:1.1;
}
.contact-list a{ color:#cfe7ff; text-decoration:none }
.contact-list a:hover{ color:#fff; text-decoration:underline }
.contact-list .note{ color:var(--muted); margin-left:4px }

/* social */
.site-footer h4, .site-footer h5{
  margin:0 0 10px; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.mt-20{ margin-top:20px }
.social-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; gap:10px }
.social-btn{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  font-weight:800; text-transform:uppercase; font-size:.8rem;
  text-decoration:none; color:#0b0d12; border:1px solid rgba(255,255,255,.15);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.social-btn.wpp{ background:linear-gradient(135deg,#31d457,#19a94b) }
.social-btn.ig{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4) }
.social-btn.yt{ background:linear-gradient(135deg,#ff4d4f,#d9363e) }
.social-btn.tt{ background:linear-gradient(135deg,#00f2ea,#000000); color:#e9eef7 }
/* Utilitário p/ ícones do Bootstrap Icons */
.fs-3{ font-size:1.75rem }
.social-btn i{ color:#fff }

/* Botão 'Detalhes' largo (100%) nos cards */
.btn-details{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 16px;
  font-weight:700;
}

/* ===== Modal de vídeo (player YouTube) ===== */
.video-modal[hidden]{ display:none !important }
.video-modal{
  position:fixed; inset:0; z-index:120;
  display:grid; grid-template-areas:"stack";
  place-items:center;
}
.video-backdrop{
  grid-area:stack;
  position:absolute; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter: blur(2px);
}
.video-dialog{
  grid-area:stack;
  width:min(960px, 92vw);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative;
  background:#000;
  overflow:hidden;
}
.video-wrapper{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
}
.video-wrapper iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.video-close{
  position:absolute; top:8px; right:8px;
  width:40px; height:40px;
  border:0; border-radius:10px;
  background:rgba(255,255,255,.12);
  color:#fff; font-size:26px; line-height:1;
  cursor:pointer;
}
.video-close:hover{ background:rgba(255,255,255,.2) }


/* ===== Hero sem corte no MOBILE ===== */
@media (max-width: 720px){
  .slide{
    height:auto;                /* libera altura do slide */
    min-height: unset;
  }
  .slide picture, .slide img{
    display:block;
    width:100%;
    height:auto;                /* imagem define a altura do slide */
  }
  .slide img{
    object-fit: contain;        /* MOSTRA 100% da arte, sem recorte */
    background:#000;            /* faixas laterais/superior se a proporção não bater */
  }
  .slide-caption{
    position: static;           /* tira overlay */
    inset: auto;
    margin-top: 10px;           /* legenda abaixo da imagem */
    text-align: left;           /* opcional: alinhamento */
    padding: 0 2px;
  }
}


/* ===== Botão Voltar ao Topo ===== */
.backtop{
  position:fixed;
  right:18px;
  bottom:max(18px, env(safe-area-inset-bottom, 0px) + 12px);
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(#0f1115cc, #0f1115cc) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
  color:#fff;
  display:grid; place-items:center;
  box-shadow: var(--shadow);
  cursor:pointer;
  z-index:95;

  opacity:0; visibility:hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.backtop.show{
  opacity:1; visibility:visible; transform: translateY(0) scale(1);
}
.backtop:hover{ filter: saturate(120%) }
.backtop:active{ transform: translateY(1px) scale(.98) }
.backtop:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
}
.backtop i{ font-size:1.25rem; line-height:1 }

/* Tamanho levemente menor no mobile */
@media (max-width: 720px){
  .backtop{ width:44px; height:44px; right:14px }
}

/* Respeitar usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  .backtop{ transition: none }
}


/* ===========================
   HOVER ANIMATIONS (desktop)
   =========================== */
@media (hover:hover) and (pointer:fine){

  /* Logo */
  .brand-logo{
    transition: transform .2s ease, box-shadow .25s ease;
  }
  .brand-logo:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,.45);
  }

  /* Menu desktop: sublinhado animado */
  .main-nav a{
    position:relative;
    transition: color .2s ease, opacity .2s ease;
  }
  .main-nav a::after{
    content:"";
    position:absolute; left:10px; right:10px; bottom:12px; height:2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    opacity:.9;
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after{ transform: scaleX(1) }
  /* não sublinhar o CTA */
  .main-nav .btn-outline::after{ display:none }

  /* Cards: leve “lift” + zoom na imagem */
  .card{
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
    will-change: transform;
  }
  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    border-color:#2e3a52;
  }
  .card-media img{
    transition: transform .35s ease;
    will-change: transform;
  }
  .card:hover .card-media img{ transform: scale(1.04) }

  /* Selo/Rating sobem um tiquinho */
  .label, .rating, .tag{
    transition: transform .25s ease, filter .25s ease;
  }
  .card:hover .label,
  .card:hover .rating,
  .card:hover .tag{
    transform: translateY(-2px);
    filter: brightness(1.04);
  }

  /* Play badge com glow */
  .play-badge{
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .25s ease;
  }
  .trailer-link:hover .play-badge{
    box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.1);
  }

  /* Botões (btn e CTA) */
  .btn, .btn-outline{
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
  .btn:hover, .btn-outline:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
  }
  .btn:active, .btn-outline:active{ transform: translateY(0) }

  /* Carrosséis (galeria/promo): levantar e dar leve zoom */
  .promos-carousel img,
  .gallery-carousel img{
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
    will-change: transform;
  }
  .promos-carousel img:hover,
  .gallery-carousel img:hover{
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    border-color:#33405a;
  }

  /* Setas do banner */
  .carousel-btn{
    transition: transform .15s ease, background .2s ease, box-shadow .25s ease;
  }
  .carousel-btn:hover{
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }

  /* "Ver todos" / links de sessão */
  .link-more{
    position:relative;
    transition: color .2s ease;
  }
  .link-more::after{
    content:"";
    position:absolute; left:0; bottom:-2px; width:100%; height:2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .link-more:hover::after,
  .link-more:focus-visible::after{ transform: scaleX(1) }

  /* Rodapé: underline gradiente */
  .footer-links a{
    position:relative;
    transition: color .2s ease;
  }
  .footer-links a::after{
    content:"";
    position:absolute; left:0; bottom:-2px; width:100%; height:1px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .25s ease;
  }
  .footer-links a:hover::after{ transform: scaleX(1) }

  /* Ícones sociais */
  .social-btn{
    transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
    will-change: transform;
  }
  .social-btn:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    filter: saturate(115%);
  }

  /* Voltar ao topo (um toque a mais) */
  .backtop:hover{
    transform: translateY(-2px) scale(1.02);
  }
}

/* Respeitar quem prefere menos animação */
@media (prefers-reduced-motion: reduce){
  .brand-logo,
  .main-nav a, .main-nav a::after,
  .card, .card-media img, .label, .rating, .tag, .play-badge,
  .btn, .btn-outline,
  .promos-carousel img, .gallery-carousel img,
  .carousel-btn, .link-more, .link-more::after,
  .footer-links a, .footer-links a::after,
  .social-btn, .backtop{
    transition: none !important;
  }
}




/* ====== Lightbox (Galeria) ====== */
.lightbox[hidden]{ display:none !important }
.lightbox{
  position:fixed; inset:0; z-index:130;
  display:grid; grid-template-areas:"stack"; place-items:center;
}
.lb-backdrop{
  grid-area:stack; position:absolute; inset:0;
  background:rgba(0,0,0,.85); backdrop-filter: blur(2px);
}
.lb-dialog{
  grid-area:stack; position:relative;
  width:min(1200px, 96vw);
  padding:0 56px; /* espaço p/ botões prev/next */
}
.lb-figure{ margin:0; text-align:center }
.lb-figure img{
  max-width:100%; max-height:80vh; width:auto; height:auto;
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.55);
  background:#000;
}
.lb-caption{
  margin-top:10px; color:#cfd6e6; font-size:.95rem;
}
.lb-counter{
  position:absolute; bottom:-26px; left:50%; transform:translateX(-50%);
  font-size:.9rem; color:#a9b2c3;
}

/* Controles */
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:999px; border:0; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(0,0,0,.35); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.lb-prev{ left:6px } .lb-next{ right:6px }
.lb-btn:hover{ background:rgba(0,0,0,.55) }

.lb-close{
  position:absolute; top:8px; right:8px;
  width:40px; height:40px; border:0; border-radius:10px;
  background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.lb-close:hover{ background:rgba(255,255,255,.2) }

/* Cursor de zoom na galeria */
.gallery-carousel img{ cursor: zoom-in }

/* Mobile */
@media (max-width: 720px){
  .lb-dialog{ width:96vw; padding:0 44px }
  .lb-btn{ width:42px; height:42px }
  .lb-counter{ bottom:-22px }
}

/* Hover nicety (só desktop) */
@media (hover:hover) and (pointer:fine){
  .lb-btn{ transition: transform .15s ease, background .2s ease, box-shadow .25s ease }
  .lb-btn:hover{ transform: translateY(-50%) scale(1.04) }
}




/* ====== footer ====== */
.sub-footer a{
  color:#cfe7ff; text-decoration:none;
}
.sub-footer a:hover{
  color:#fff; text-decoration:underline;
}




/* ===== Modal de Aviso (fix layering & clicks) ===== */
.announce-modal[hidden]{ display:none !important; }

.announce-modal{
  position: fixed; inset:0; z-index: 140; /* acima de tudo */
  display: grid; grid-template-areas: "stack";
  place-items: center;
  opacity: 0; transform: scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}

.announce-modal.show{
  opacity: 1; transform: none;
}

.announce-backdrop{
  grid-area: stack;
  position: absolute; inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
  z-index: 1;              /* 🔒 atrás do dialog */
}

.announce-dialog{
  grid-area: stack;
  width: min(640px, 92vw);
  background: linear-gradient(180deg, #151a26, #0e121b);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: 18px;
  color: var(--text);
  z-index: 2;              /* 🔓 acima do backdrop */
  pointer-events: auto;    /* garante clique dentro */
}

.announce-header{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.announce-header .bi-megaphone-fill{
  font-size: 26px; color: var(--brand-2);
}
.announce-header h4{ margin:0; font-size: 1.25rem }

.announce-body{
  line-height: 1.5;
  color: #e9eef7;
  margin: 4px 0 14px;
  white-space: pre-line;
}

.announce-actions{
  display: flex; justify-content: flex-end; gap: 10px;
}

.announce-close{ min-width: 140px; }

html.modal-open, body.modal-open{ overflow: hidden !important; }