/* ============================================================
   SHARED SOCIAL SECTION — single source of truth.
   Loaded on EVERY page via head.ejs (after the page CSS, so it
   always wins). Edit here once → home, contact, category,
   and any future page update together.
   Pairs with the markup partial: src/views/partials/social.ejs
   ============================================================ */
.social-section{padding-top:8px; padding-bottom:24px;}
.social-shell{
  background:linear-gradient(150deg, var(--bg-soft), var(--bg));
  border:1px solid var(--line); border-radius:20px;
  padding:34px 54px; text-align:center;
}
.social-shell .eyebrow{justify-content:center; margin-bottom:2px;}
.social-shell h2{font-size:26px; margin-top:6px; margin-bottom:8px;}
.social-shell > p{color:var(--ink-dim); font-size:14.5px; max-width:460px; margin:0 auto 22px;}
.social-grid{display:flex; flex-wrap:nowrap; justify-content:center; gap:10px;}
.social-card{
  display:flex; align-items:center; gap:9px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:12px 11px;
  box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-width:0; flex:1 1 0;
}
.social-card:has(.si-whatsapp){order:-1;}
.social-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--terracotta);}
.social-card .si-wrap{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.social-card .si-wrap svg{width:18px; height:18px;}
.social-card .si-text{text-align:left; min-width:0;}
.social-card .si-text b{display:block; font-size:13px; color:var(--ink);}
.social-card .si-text span{font-size:10.5px; color:var(--muted); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.si-facebook{background:linear-gradient(135deg,#3b6bd6,#1f4bb0);}
.si-instagram{background:linear-gradient(135deg,#f0aa4a,#d93a7d 55%,#8a3ab9);}
.si-youtube{background:linear-gradient(135deg,#ff5b4d,#d81f11);}
.si-whatsapp{background:linear-gradient(135deg,#4fd17d,#1f9e53);}
.si-tiktok{background:linear-gradient(135deg,#3a3a3a,#111111);}
@media (max-width:760px){ .social-grid{flex-wrap:wrap;} .social-card{flex:1 1 45%;} }
@media (max-width:640px){ .social-shell{padding:32px 22px;} }
@media (max-width:480px){ .social-card{flex:1 1 100%;} }

/* ---- floating WhatsApp button (all pages, bottom-right, subtle) ---- */
.wa-float{
  position:fixed; right:30px; bottom:30px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#25d366,#1ba851);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 6px 18px rgba(37,211,102,0.38);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 9px 24px rgba(37,211,102,0.5); }