:root{
  /* Base clara */
  --bg:#f7f9fc;
  --card:#ffffff;
  --border:#e6eaf0;
  --text:#0f172a;
  --muted:#64748b;

  /* Identidade Camisetivando */
  --teal:#20d5c5;
  --navy:#0b1a3a;
  --pink:#ff2d67;

  --radius:22px;
  --radius2:18px;
  --shadow:0 12px 30px rgba(15,23,42,.08);
}

*{ box-sizing:border-box; }

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

.wrap{
  max-width:860px;
  margin:0 auto;
  padding:22px 16px 40px;
}

/* ===================== CARDS ===================== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:14px;
}

/* ===================== TOPO ===================== */
.top{
  padding:18px;
}

.brand{
  display:flex;
  gap:16px;
  align-items:center;
}

.brand-info{ min-width:0; }

/* LOGO — SEM MOLDURA */
.logo-wrap{
  width:96px;
  height:96px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;

  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-wrap img{
  width:96px;
  height:96px;
  object-fit:contain;
  border-radius:18px;
}

.title{
  margin:0;
  font-size:22px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
}

.subtitle{
  margin:6px 0 10px;
  font-size:13px;
  color:var(--muted);
}

.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(32,213,197,.12);
  border:1px solid rgba(32,213,197,.25);
  color:var(--navy);
}

/* ===================== LINKS ===================== */
.links{
  padding:16px;
}

.btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  margin:10px 0;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:#ffffff;
  text-decoration:none;
  color:var(--text);
  transition:all .15s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}

.btn-text{ min-width:0; }

.btn-text strong{
  font-size:15px;
  display:block;
}

.btn-text small{
  font-size:12px;
  color:var(--muted);
}

/* Ícone padrão (Site) */
.btn-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(32,213,197,.15);
  color:var(--navy);
  flex:0 0 auto;
}

.btn-ico svg{
  width:22px;
  height:22px;
}

/* Botão primário */
.primary{
  border-color:rgba(32,213,197,.4);
}

/* WhatsApp (borda do botão) */
.whatsapp{
  border-color:rgba(255,45,103,.4);
}

/* ===================== ÍCONES POR IMAGEM (Shopee/ML/Wpp) ===================== */
.btn-ico.brand{
  background:#ffffff;
  border:1px solid rgba(230,234,240,.8);
}

/* Imagem dentro do círculo */
.ico-img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}

/* Ajuste fino por marca (as imagens são diferentes) */
.ico-shopee{ width:30px; height:30px; }
.ico-ml{ width:34px; height:26px; }
.ico-wpp{ width:30px; height:30px; }

/* ===================== SOCIAIS ===================== */
.socials{
  padding:16px;
}

.section-title{
  margin-bottom:12px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
}

.social-grid{
  display:grid;
  gap:10px;
}

.social{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:#ffffff;
  text-decoration:none;
  color:var(--text);
  transition:.15s;
}

.social:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}

.social-ico{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-ico svg{
  width:22px;
  height:22px;
}

/* Instagram (outline correto) */
.social-ico.ig{
  color:#E1306C;
  background:rgba(225,48,108,.12);
}

/* TikTok */
.social-ico.tt{
  color:#000000;
  background:rgba(0,0,0,.08);
}
.social-ico.tt svg{
  fill:currentColor;
}

/* Facebook */
.social-ico.fb{
  color:#1877F2;
  background:rgba(24,119,242,.12);
}
.social-ico.fb svg{
  fill:currentColor;
}

.social small{
  color:var(--muted);
}

/* ===================== FOOTER ===================== */
.footer{
  margin-top:10px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

/* ===================== RESPONSIVO ===================== */
@media (min-width:720px){
  .social-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* Acessibilidade: foco visível */
a:focus-visible{
  outline:3px solid rgba(32,213,197,.55);
  outline-offset:2px;
  border-radius:14px;
}