/* Cleubi.com - Visual social seguro
   Regra principal: NÃO mexer nos botões sociais .clbs-actions e .clbs-btn.
   Este arquivo só estiliza cabeçalho, Feed e card/post/avatar. */

body.clb-visual-social-seguro{
  --cv-bg:#fff7ec;
  --cv-card:#fffdf8;
  --cv-dark:#0b101d;
  --cv-dark2:#151d31;
  --cv-text:#172039;
  --cv-muted:#6f7789;
  --cv-orange:#ff7a18;
  --cv-orange2:#ffa51f;
  --cv-coral:#ff4f18;
  --cv-border:rgba(255,122,24,.18);
  --cv-shadow:0 18px 42px rgba(30,41,59,.12);

  background:
    radial-gradient(circle at 18% 0%, rgba(255,122,24,.13), transparent 26%),
    linear-gradient(180deg,#eef6ff 0%,#fff7ec 38%,#fffaf3 100%) !important;
  color:var(--cv-text) !important;
  overflow-x:hidden !important;
}

/* Remove qualquer avatar antigo criado por erro dentro da barra dos botões */
.clbs-actions .clb-premium-avatar,
.clbs-actions .clb-safe-avatar,
.clbs-actions .clb-visual-avatar,
.clbs-actions .clb-premium-menu,
.clbs-actions .clb-visual-menu{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Cabeçalho premium */
body.clb-visual-social-seguro header,
body.clb-visual-social-seguro .site-header,
body.clb-visual-social-seguro .topbar,
body.clb-visual-social-seguro .navbar{
  background:
    radial-gradient(circle at 12% 42%, rgba(255,122,24,.22), transparent 22%),
    linear-gradient(135deg,#090d18 0%,#11192b 52%,#1a2034 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 12px 32px rgba(8,13,24,.22) !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:22px clamp(18px,4vw,44px) !important;
  position:relative !important;
  z-index:20 !important;
}

body.clb-visual-social-seguro header a,
body.clb-visual-social-seguro .site-header a,
body.clb-visual-social-seguro .topbar a,
body.clb-visual-social-seguro .navbar a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:900 !important;
}

body.clb-visual-social-seguro .clb-logo-com{
  color:var(--cv-orange2) !important;
}

body.clb-visual-social-seguro header a[href*="page=feed"],
body.clb-visual-social-seguro .site-header a[href*="page=feed"],
body.clb-visual-social-seguro .topbar a[href*="page=feed"],
body.clb-visual-social-seguro .navbar a[href*="page=feed"]{
  color:var(--cv-orange2) !important;
  position:relative !important;
}

body.clb-visual-social-seguro header a[href*="page=feed"]::after,
body.clb-visual-social-seguro .site-header a[href*="page=feed"]::after,
body.clb-visual-social-seguro .topbar a[href*="page=feed"]::after,
body.clb-visual-social-seguro .navbar a[href*="page=feed"]::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-7px !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--cv-orange),var(--cv-orange2)) !important;
}

body.clb-visual-social-seguro header a[href*="criar"],
body.clb-visual-social-seguro header a[href*="cadastro"],
body.clb-visual-social-seguro .site-header a[href*="criar"],
body.clb-visual-social-seguro .site-header a[href*="cadastro"],
body.clb-visual-social-seguro .topbar a[href*="criar"],
body.clb-visual-social-seguro .topbar a[href*="cadastro"],
body.clb-visual-social-seguro .navbar a[href*="criar"],
body.clb-visual-social-seguro .navbar a[href*="cadastro"]{
  background:linear-gradient(135deg,var(--cv-coral),var(--cv-orange2)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(255,98,24,.24) !important;
  padding:10px 17px !important;
  border-radius:999px !important;
}

/* Área principal */
body.clb-visual-social-seguro main,
body.clb-visual-social-seguro .main,
body.clb-visual-social-seguro .container,
body.clb-visual-social-seguro .page{
  width:min(100%,980px) !important;
  max-width:980px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  padding:22px clamp(10px,2.6vw,24px) 42px !important;
}

/* Card do Feed premium */
body.clb-visual-social-seguro .clb-visual-feed-hero{
  width:100% !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:30px !important;
  padding:22px !important;
  margin:18px auto 22px !important;
  background:linear-gradient(180deg,#fffaf3,#fff6e9) !important;
  box-shadow:var(--cv-shadow) !important;
  overflow:hidden !important;
}

body.clb-visual-social-seguro .clb-visual-feed-inner{
  display:grid !important;
  grid-template-columns:84px 1fr !important;
  align-items:center !important;
  gap:22px !important;
  border-radius:24px !important;
  padding:30px !important;
  min-height:170px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(135deg,#e73518 0%,#ff7417 45%,#ffa51f 100%) !important;
  color:#fff !important;
  position:relative !important;
  overflow:hidden !important;
}

body.clb-visual-social-seguro .clb-visual-feed-inner::after{
  content:"" !important;
  position:absolute !important;
  right:-14% !important;
  bottom:-48% !important;
  width:72% !important;
  height:92% !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.06) !important;
}

body.clb-visual-social-seguro .clb-visual-feed-icon{
  width:74px !important;
  height:74px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.18) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:2 !important;
}

body.clb-visual-social-seguro .clb-visual-feed-icon span{
  width:42px !important;
  height:42px !important;
  border-radius:13px !important;
  background:#fff8ee !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--cv-orange) !important;
  font-size:25px !important;
  font-weight:900 !important;
}

body.clb-visual-social-seguro .clb-visual-feed-hero h1,
body.clb-visual-social-seguro .clb-visual-feed-hero h2{
  color:#fff !important;
  font-size:44px !important;
  line-height:1 !important;
  margin:0 0 12px !important;
  letter-spacing:-.04em !important;
  position:relative !important;
  z-index:2 !important;
}

body.clb-visual-social-seguro .clb-visual-feed-hero p{
  color:rgba(255,255,255,.94) !important;
  font-size:19px !important;
  line-height:1.32 !important;
  max-width:480px !important;
  margin:0 !important;
  position:relative !important;
  z-index:2 !important;
}

body.clb-visual-social-seguro .clb-visual-feed-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:15px !important;
  padding:10px 15px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#e85316 !important;
  font-weight:950 !important;
  text-decoration:none !important;
  position:relative !important;
  z-index:3 !important;
}

/* Card de publicação: só layout, sem mexer nos botões */
body.clb-visual-social-seguro .clb-visual-post-card{
  width:100% !important;
  box-sizing:border-box !important;
  margin:18px auto !important;
  padding:30px 30px 26px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,251,245,.98)) !important;
  border:1px solid rgba(255,122,24,.14) !important;
  box-shadow:var(--cv-shadow) !important;
  position:relative !important;
  overflow:hidden !important;
}

body.clb-visual-social-seguro .clb-visual-post-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:3px !important;
  background:linear-gradient(90deg,var(--cv-coral),var(--cv-orange2),transparent) !important;
  opacity:.7 !important;
}

/* Avatar único da publicação */
body.clb-visual-social-seguro .clb-visual-avatar{
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#ff4f18,#ffae22) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  font-weight:950 !important;
  box-shadow:0 12px 24px rgba(255,93,24,.22) !important;
  position:absolute !important;
  left:30px !important;
  top:30px !important;
  z-index:3 !important;
}

/* Menu de três pontos, só no topo da publicação */
body.clb-visual-social-seguro .clb-visual-menu{
  position:absolute !important;
  top:28px !important;
  right:24px !important;
  width:34px !important;
  height:34px !important;
  border:0 !important;
  background:transparent !important;
  color:#8a92a3 !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
  z-index:3 !important;
}

/* Nome e @ empurrados para não ficarem embaixo da foto */
body.clb-visual-social-seguro .clb-visual-post-name{
  margin-left:90px !important;
  margin-right:42px !important;
  margin-top:0 !important;
  margin-bottom:7px !important;
  color:var(--cv-text) !important;
  font-size:29px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}

body.clb-visual-social-seguro .clb-visual-post-meta{
  margin-left:90px !important;
  margin-right:42px !important;
  color:var(--cv-muted) !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:750 !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

body.clb-visual-social-seguro .clb-visual-post-text{
  color:var(--cv-text) !important;
  font-size:29px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
  margin:30px 0 18px !important;
  letter-spacing:-.025em !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

/* Mobile */
@media(max-width:760px){
  body.clb-visual-social-seguro main,
  body.clb-visual-social-seguro .main,
  body.clb-visual-social-seguro .container,
  body.clb-visual-social-seguro .page{
    padding:16px 10px 34px !important;
  }

  body.clb-visual-social-seguro .clb-visual-feed-hero{
    border-radius:28px !important;
    padding:16px !important;
    margin:16px 0 18px !important;
  }

  body.clb-visual-social-seguro .clb-visual-feed-inner{
    grid-template-columns:58px 1fr !important;
    gap:14px !important;
    min-height:126px !important;
    padding:20px 16px !important;
    border-radius:22px !important;
  }

  body.clb-visual-social-seguro .clb-visual-feed-icon{
    width:54px !important;
    height:54px !important;
    border-radius:17px !important;
  }

  body.clb-visual-social-seguro .clb-visual-feed-icon span{
    width:33px !important;
    height:33px !important;
    font-size:20px !important;
  }

  body.clb-visual-social-seguro .clb-visual-feed-hero h1,
  body.clb-visual-social-seguro .clb-visual-feed-hero h2{
    font-size:31px !important;
    margin-bottom:8px !important;
  }

  body.clb-visual-social-seguro .clb-visual-feed-hero p{
    font-size:14px !important;
  }

  body.clb-visual-social-seguro .clb-visual-post-card{
    border-radius:26px !important;
    padding:24px 16px 20px !important;
    margin:16px 0 !important;
  }

  body.clb-visual-social-seguro .clb-visual-avatar{
    width:58px !important;
    height:58px !important;
    left:16px !important;
    top:22px !important;
    font-size:21px !important;
  }

  body.clb-visual-social-seguro .clb-visual-menu{
    top:21px !important;
    right:12px !important;
  }

  body.clb-visual-social-seguro .clb-visual-post-name{
    margin-left:72px !important;
    margin-right:34px !important;
    font-size:24px !important;
  }

  body.clb-visual-social-seguro .clb-visual-post-meta{
    margin-left:72px !important;
    margin-right:34px !important;
    font-size:13px !important;
  }

  body.clb-visual-social-seguro .clb-visual-post-text{
    font-size:25px !important;
    margin:28px 0 14px !important;
  }
}