:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #556070;

  --red: #ed3237;
  --blue: #1f6fff;

  --card: rgba(255,255,255,.84);
  --line: rgba(15,23,42,.10);
  --shadow: 0 18px 70px rgba(0,0,0,.12);
  --radius: 26px;
  --max: 520px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color: var(--text);
}

.page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 14px;
  position: relative;
}

.page::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(31,111,255,.15), transparent 62%),
    radial-gradient(900px 520px at 80% 20%, rgba(237,50,55,.13), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(31,111,255,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fafbff);
  z-index: 0;
}

.card{
  width: min(var(--max), 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

/* topo */
.top{
  padding: 22px 20px 12px;
  text-align:center;
  position: relative;
}

.top::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(31,111,255,.18), rgba(237,50,55,.18));
  opacity: .14;
  pointer-events:none;
}

/* LOGO MAIOR + imagem maior */
.brand{
  position: relative;
  width: 132px;     /* aumentou */
  height: 132px;    /* aumentou */
  margin: 0 auto 10px;
  display:grid;
  place-items:center;
}

/* degrade do circulo mais fino */
.logo-ring{
  position:absolute;
  inset: -6px;
  padding: 3px; /* fino */
  border-radius: 999px;
  background: conic-gradient(from 180deg, rgba(31,111,255,1), rgba(237,50,55,1), rgba(31,111,255,1));
  opacity: .95;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.logo{
  position: relative;
  width: 112px;    /* aumentou */
  height: 112px;   /* aumentou */
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.logo img{
  width: 90%;   /* imagem maior */
  height: 90%;
  object-fit: contain;
  display:block;
}

.handle{
  margin: 4px 0 8px;
  font-size: 22px;
  letter-spacing: -.01em;
}

/* botoes pequenos NORMAL (sem ativo) */
.mini-actions{
  display:flex;
  gap: 10px;
  justify-content:center;
  margin-top: 6px;
  padding-bottom: 6px;
}

.mini-btn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  display:grid;
  place-items:center;
  text-decoration:none;
  color: rgba(15,23,42,.72);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.mini-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(31,111,255,.25);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  color: var(--blue);
}

/* lista */
.list{
  padding: 14px 16px 6px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  text-decoration:none;
  color: var(--text);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}

.item:hover{
  transform: translateY(-2px);
  border-color: rgba(31,111,255,.20);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Ícone padrão */
.ic{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  display:grid;
  place-items:center;
  background: #fff;
}
.ic i{
  font-size: 18px;
  color: rgba(15,23,42,.76);
  transition: color .18s ease;
}
.item:hover .ic i{ color: var(--red); }

.tx{ flex: 1; min-width: 0; }
.tx strong{
  display:block;
  font-size: 14px;
  letter-spacing: .02em;
}
.tx small{
  display:block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.go{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  color: rgba(15,23,42,.60);
  transition: transform .18s ease, color .18s ease, border-color .18s ease;
}
.item:hover .go{
  transform: translateX(1px);
  color: var(--blue);
  border-color: rgba(31,111,255,.18);
}

/* ===== WhatsApp ATIVO (igual print) ===== */
.item-wpp-active{
  border-color: rgba(31,111,255,.18);
  background: linear-gradient(90deg, rgba(255, 210, 214, .55), rgba(212, 225, 255, .55));
}

.item-wpp-active:hover{
  border-color: rgba(31,111,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* ícone bolinha branca */
.ic-wpp-active{
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.92);
}
.ic-wpp-active i{
  color: #ff3b5c; /* tom rosado */
}

/* seta em cápsula branca */
.go-wpp-active{
  border-color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.92);
  color: #2563eb; /* azul */
}

/* rodapé */
.footer{
  padding: 12px 16px 18px;
  text-align:center;
}

.copy{
  margin: 0 0 10px;
  font-size: 12.5px;
  color: rgba(85,96,112,.90);
}

/* DR WEB menor, SEM hover, sem "grosso" */
.credit{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 11px;                 /* menor */
  color: rgba(15,23,42,.62);
  text-decoration:none;
  padding: 0;                      /* sem caixa grossa */
  border: 0;
  background: transparent;
}

.credit-strong{
  font-weight: 700;
  color: rgba(15,23,42,.70);
}

/* desativa hover visual */
.credit:hover{
  transform: none;
  box-shadow: none;
  border: 0;
  color: rgba(15,23,42,.62);
}

/* responsivo */
@media (max-width: 420px){
  .handle{ font-size: 20px; }

  .brand{ width: 140px; height: 140px; }
  .logo{ width: 118px; height: 118px; }
  .logo img{ width: 92%; height: 92%; }

  .item{ padding: 13px 12px; border-radius: 18px; }
  .ic{ width: 44px; height: 44px; border-radius: 16px; }
  .go{ width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}