:root{--bg:#090a0d;--card:#121419;--line:#252831;--red:#c42530;--text:#f5f6f8;--muted:#a8adb8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 10%,#291017 0,transparent 34%),var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}a{color:inherit;text-decoration:none}header{height:74px;display:flex;align-items:center;gap:28px;max-width:1180px;margin:auto;padding:0 24px;border-bottom:1px solid #17191f}.brand{font-size:22px;font-weight:900;letter-spacing:.8px}.brand b{color:var(--red)}nav{display:flex;gap:22px;margin-left:auto;color:var(--muted)}.mini,.primary,.plans a{background:var(--red);padding:11px 18px;border-radius:8px;font-weight:800}.hero{max-width:1180px;margin:60px auto 35px;padding:20px 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.hero h1{font-size:clamp(48px,7vw,82px);line-height:.94;margin:20px 0}.hero em{font-style:normal;color:#e53a46}.hero p{font-size:19px;line-height:1.6;color:var(--muted);max-width:650px}.pill{display:inline-block;border:1px solid #3b2025;background:#1b1013;color:#e9b7bc;border-radius:999px;padding:7px 12px;font-size:13px}.cta{display:flex;gap:12px;margin:26px 0 14px}.primary,.secondary{display:inline-block;padding:14px 20px;border-radius:9px;font-weight:900}.secondary{border:1px solid #363a44}.hero small{color:#7f8592}.visual{display:grid;place-items:center}.app{width:min(100%,470px);background:linear-gradient(180deg,#17191f,#0e1014);border:1px solid #333741;border-radius:18px;padding:22px;box-shadow:0 30px 80px #0008}.appbar{display:flex;justify-content:space-between;margin-bottom:26px}.appbar span{color:#58d998;font-size:13px}.app label{font-size:11px;color:#9298a5;display:block;margin:15px 0 6px}.field,.preset{background:#0b0d10;border:1px solid #2b2f37;border-radius:8px;padding:12px;display:flex;justify-content:space-between}.meter{height:10px;background:#2b2e35;border-radius:99px;overflow:hidden}.meter i{height:100%;display:block;background:linear-gradient(90deg,#92202a,#ef4653)}.preset{width:45%;margin-top:10px}.bars{display:flex;gap:4px;align-items:end;height:42px}.bars i{width:8%;height:40%;background:#c42530;border-radius:3px}.bars i:nth-child(3n){height:82%}.bars i:nth-child(4n){height:58%}.app button{width:100%;margin-top:20px;background:#2d191d;color:#ff7e89;border:1px solid #5a272d;border-radius:9px;padding:13px;font-weight:900}.features{max-width:1180px;margin:60px auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.features article,.plans article,.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}.features p,.plans p,.faq p{color:var(--muted);line-height:1.5}.compat,.pricing,.faq{max-width:1180px;margin:70px auto;padding:0 24px}.compat{padding:36px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.compat div{color:#c7cbd3;font-size:19px;word-spacing:8px}.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.plans strong{font-size:26px}.plans a{display:inline-block;margin-top:12px}.faq details{margin:10px 0}.faq summary{font-weight:800;cursor:pointer}footer{text-align:center;color:#777d88;padding:45px 20px;border-top:1px solid #181a20}@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;margin-top:25px}.features{grid-template-columns:1fr 1fr}}@media(max-width:540px){.features{grid-template-columns:1fr}.cta{flex-direction:column}.hero h1{font-size:50px}}

/* ===== RE7 HERO CENTRALIZADO V2 ===== */

/* HEADER */
.re7-topbar{
  width:100%;
  max-width:1180px;
  height:76px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:26px;
  border-bottom:1px solid #17191f;
  background:transparent;
}

.re7-topbar .brand{
  flex:0 0 auto;
  font-size:22px;
  font-weight:900;
  letter-spacing:.8px;
}

.re7-topbar .brand b{color:#e53142}

.re7-nav{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:auto;
}

.re7-nav a{
  color:#a8adb8;
  font-size:13px;
  transition:.2s ease;
}

.re7-nav a:hover{color:#fff}

.re7-head-actions{
  display:flex;
  align-items:center;
  gap:9px;
  margin-left:4px;
}

.head-free,
.head-plans{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  border-radius:9px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  transition:.2s ease;
}

.head-free{
  color:#fff;
  background:linear-gradient(135deg,#f52d42,#b70d24);
  box-shadow:0 9px 28px rgba(239,35,64,.18);
}

.head-plans{
  color:#fff;
  background:#111319;
  border:1px solid #323640;
}

.head-free:hover,
.head-plans:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

/* HERO: neutraliza as regras antigas de grid/tamanho */
.hero.hero-featured.hero-centered{
  width:100% !important;
  max-width:1160px !important;
  min-height:0 !important;
  margin:34px auto 54px !important;
  padding:0 24px !important;
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  align-items:initial !important;
}

.hero-photo-card{
  position:relative;
  width:100%;
  max-width:1080px;
  aspect-ratio:16 / 9;
  margin:0 auto;
  overflow:hidden;
  border-radius:20px;
  background:#07080b;
  border:1px solid rgba(255,59,78,.28);
  box-shadow:
    0 24px 75px rgba(0,0,0,.50),
    0 0 45px rgba(225,35,57,.07);
}

.hero-photo-card > img{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.hero-photo-gradient{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 60%,rgba(4,5,8,.33) 100%),
    linear-gradient(90deg,rgba(3,4,6,.12) 0%,transparent 30%);
}

.hero-photo-actions{
  position:absolute;
  left:24px;
  bottom:22px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
}

.hero-download,
.hero-plans{
  display:flex !important;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:0 16px;
  border-radius:12px;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:900;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:.2s ease;
}

.hero-download{
  background:linear-gradient(135deg,rgba(247,42,65,.96),rgba(181,10,35,.96));
  border:1px solid rgba(255,109,124,.38);
  box-shadow:0 12px 34px rgba(202,14,43,.28);
}

.hero-plans{
  background:rgba(12,13,18,.88);
  border:1px solid rgba(255,255,255,.16);
}

.hero-download:hover,
.hero-plans:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.hero-action-icon{
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(0,0,0,.18);
  font-size:15px;
}

.hero-download small,
.hero-plans small{
  display:block;
  margin:0 0 2px;
  color:rgba(255,255,255,.68) !important;
  font-size:7px !important;
  line-height:1 !important;
  letter-spacing:.12em;
}

.hero-download strong,
.hero-plans strong{
  display:block;
  color:#fff;
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
}

.hero-underline{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:13px auto 0;
  color:#8d929d;
  font-size:10px;
  letter-spacing:.05em;
}

.hero-underline b{color:#d52a3e}

/* TABLET */
@media(max-width:900px){
  .re7-nav{display:none}

  .re7-topbar{
    padding:0 18px;
    gap:14px;
  }

  .re7-head-actions{
    margin-left:auto;
  }

  .hero.hero-featured.hero-centered{
    margin-top:22px !important;
    padding:0 16px !important;
  }

  .hero-photo-card{
    max-width:760px;
    border-radius:17px;
  }

  .hero-photo-actions{
    left:18px;
    bottom:16px;
  }
}

/* CELULAR */
@media(max-width:620px){
  .re7-topbar{
    height:68px;
    padding:0 13px;
  }

  .re7-topbar .brand{
    font-size:18px;
  }

  .head-free{
    min-height:38px;
    padding:0 11px;
    font-size:9px;
  }

  .head-plans{
    display:none;
  }

  .hero.hero-featured.hero-centered{
    margin:16px auto 42px !important;
    padding:0 11px !important;
  }

  .hero-photo-card{
    aspect-ratio:16 / 9;
    border-radius:13px;
    overflow:hidden;
  }

  .hero-photo-card > img{
    object-fit:cover !important;
    object-position:center center !important;
  }

  /* No celular os botões ficam abaixo da foto para não cobrir sua imagem */
  .hero-photo-actions{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin:10px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hero-photo-card{
    overflow:visible;
    margin-bottom:72px;
  }

  .hero-photo-card > img{
    border-radius:13px;
    overflow:hidden;
  }

  .hero-photo-gradient{
    border-radius:13px;
    overflow:hidden;
    pointer-events:none;
  }

  .hero-download,
  .hero-plans{
    min-height:50px;
    padding:0 11px;
    border-radius:10px;
  }

  .hero-download strong,
  .hero-plans strong{
    font-size:10px;
  }

  .hero-underline{
    margin-top:0;
    padding:0 6px;
    font-size:9px;
  }
}

@media(max-width:390px){
  .hero-photo-actions{
    grid-template-columns:1fr;
  }

  .hero-photo-card{
    margin-bottom:130px;
  }
}

/* ===== /RE7 HERO CENTRALIZADO V2 ===== */


/* ===== RE7 MOBILE RESPONSIVO V3 ===== */

/*
 * Desktop permanece como está.
 * Estas regras só entram em telas de até 768px.
 */
@media (max-width: 768px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

  main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* CABEÇALHO MOBILE */
  .re7-topbar {
    width: 100% !important;
    max-width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .re7-topbar .brand {
    flex: 0 0 auto !important;
    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .re7-nav {
    display: none !important;
  }

  .re7-head-actions {
    margin-left: auto !important;
    display: flex !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .head-free {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  .head-plans {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
  }

  /* HERO MOBILE - NÃO DEIXA A FOTO DOMINAR A TELA */
  .hero.hero-featured.hero-centered {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 14px auto 30px !important;
    padding: 0 8px !important;
    overflow: visible !important;
  }

  .hero-photo-card {
    position: relative !important;
    width: 92% !important;
    max-width: 540px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .hero-photo-card > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 12px !important;
  }

  .hero-photo-gradient {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 12px !important;
    pointer-events: none !important;
  }

  /*
   * Botões continuam dentro da foto,
   * porém pequenos para não cobrir o conteúdo.
   */
  .hero-photo-actions {
    position: absolute !important;
    z-index: 10 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .hero-download,
  .hero-plans {
    width: auto !important;
    min-width: 0 !important;
    min-height: 37px !important;
    height: 37px !important;
    padding: 0 9px !important;
    gap: 6px !important;
    border-radius: 8px !important;
    flex: 0 1 auto !important;
  }

  .hero-action-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }

  .hero-download small,
  .hero-plans small {
    display: none !important;
  }

  .hero-download strong,
  .hero-plans strong {
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero-underline {
    width: 94% !important;
    max-width: 540px !important;
    margin: 8px auto 0 !important;
    padding: 0 4px !important;
    gap: 5px !important;
    font-size: 7px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  /*
   * Garante que o conteúdo depois do banner
   * continue no fluxo normal da página.
   */
  .hero.hero-featured.hero-centered + *,
  .hero-centered ~ section {
    position: relative !important;
    z-index: 1 !important;
  }

  img {
    max-width: 100%;
  }
}


/* CELULARES MENORES */
@media (max-width: 480px) {

  .re7-topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 9px !important;
  }

  .re7-topbar .brand {
    font-size: 15px !important;
  }

  .head-free {
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  /* Esconde PLANOS do topo somente em celular estreito.
     O botão PLANOS continua disponível no banner. */
  .head-plans {
    display: none !important;
  }

  .hero.hero-featured.hero-centered {
    margin-top: 10px !important;
    margin-bottom: 24px !important;
    padding: 0 5px !important;
  }

  .hero-photo-card {
    width: 90% !important;
    max-width: 430px !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 10px !important;
  }

  .hero-photo-card > img,
  .hero-photo-gradient {
    border-radius: 10px !important;
  }

  .hero-photo-actions {
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    gap: 5px !important;
  }

  .hero-download,
  .hero-plans {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    gap: 4px !important;
    border-radius: 7px !important;
  }

  .hero-action-icon {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
    font-size: 9px !important;
  }

  .hero-download strong,
  .hero-plans strong {
    font-size: 7px !important;
  }

  .hero-underline {
    width: 90% !important;
    font-size: 6.5px !important;
    margin-top: 6px !important;
  }
}


/* CELULAR MUITO ESTREITO */
@media (max-width: 360px) {

  .hero-photo-card {
    width: 88% !important;
  }

  .hero-plans {
    display: none !important;
  }

  .hero-download {
    height: 31px !important;
    min-height: 31px !important;
  }

  .hero-underline {
    width: 88% !important;
  }
}

/* ===== /RE7 MOBILE RESPONSIVO V3 ===== */