/* ================================================
   HGW Colombia · sections.css
   Sobre · Plan · Rangos · Productos · Testimonios
   ARIA · Foro · Blog · CTA · Contacto · Footer
   ================================================ */

/* ── SOBRE ─────────────────────────────────── */
#sobre { padding:var(--sp-2xl) 0; background:var(--ink2); }
.sobre-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,80px); align-items:center; }
.sobre-visual { position:relative; }
.sobre-deco { position:absolute; top:-16px; right:-16px; width:100px; height:100px; border:1px solid var(--border2); border-radius:50%; animation:spinSlow 20s linear infinite; pointer-events:none; }
.sobre-deco::after { content:''; position:absolute; top:8px; right:8px; bottom:8px; left:8px; border:1px dashed rgba(201,168,76,0.2); border-radius:50%; }
.sobre-frame { width:100%; aspect-ratio:4/5; background:linear-gradient(135deg,var(--ink3),var(--ink2)); border:1px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:clamp(56px,10vw,80px); position:relative; overflow:hidden; }
.sobre-frame::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 40%,rgba(61,107,79,0.2),transparent 70%); }
.sobre-frame-lbl { position:absolute; bottom:16px; left:16px; right:16px; background:rgba(14,14,11,0.88); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:8px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sobre-frame-lbl span { font-family:var(--serif); font-size:clamp(13px,2.5vw,16px); color:var(--cream); }
.sobre-frame-lbl em   { font-size:10px; color:var(--gold); letter-spacing:1px; flex-shrink:0; }
.sobre-list { list-style:none; display:flex; flex-direction:column; gap:clamp(12px,2vw,16px); margin-top:clamp(20px,3vw,28px); }
.sobre-list li { display:flex; align-items:flex-start; gap:12px; font-size:var(--t-s); color:var(--text2); line-height:1.65; }
.sobre-list-ic { width:26px; height:26px; flex-shrink:0; background:rgba(201,168,76,0.1); border:1px solid var(--border2); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.sobre-sig { margin-top:clamp(24px,4vw,36px); padding-top:clamp(20px,3vw,28px); border-top:1px solid var(--border); }
.sobre-sig-name  { font-family:var(--serif); font-size:clamp(18px,3vw,22px); font-style:italic; color:var(--cream); }
.sobre-sig-title { font-size:10px; color:var(--text3); letter-spacing:2px; text-transform:uppercase; margin-top:4px; }

/* ── PLAN / BONOS ──────────────────────────── */
#plan { padding:var(--sp-2xl) 0; background:var(--ink); }
.plan-hd { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,60px); align-items:end; margin-bottom:clamp(40px,6vw,72px); }
.bonos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.bono-card { background:var(--ink2); padding:clamp(20px,3vw,28px) clamp(16px,2.5vw,24px); border:1px solid var(--border); cursor:pointer; transition:border-color 0.3s,transform 0.3s; position:relative; overflow:hidden; }
.bono-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,0.08),transparent); opacity:0; transition:opacity 0.3s; }
.bono-card:hover { border-color:var(--border2); transform:translateY(-4px); }
.bono-card:hover::before { opacity:1; }
.bono-n    { font-family:var(--serif); font-size:clamp(32px,5vw,48px); font-weight:900; color:rgba(201,168,76,0.13); line-height:1; position:absolute; top:10px; right:12px; }
.bono-ico  { font-size:clamp(22px,3.5vw,28px); margin-bottom:12px; }
.bono-name { font-family:var(--serif); font-size:clamp(13px,2vw,16px); font-weight:700; color:var(--cream); margin-bottom:5px; }
.bono-pct  { font-size:clamp(16px,2.5vw,22px); font-weight:700; color:var(--gold); font-family:var(--serif); margin-bottom:8px; }
.bono-desc { font-size:clamp(11px,1.8vw,12px); color:var(--text3); line-height:1.6; }
.memb-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,2vw,16px); margin-top:clamp(40px,6vw,60px); padding-top:clamp(32px,5vw,60px); border-top:1px solid var(--border); }
.memb-card { border:1px solid var(--border); border-radius:4px; padding:clamp(20px,3vw,28px) clamp(16px,2.5vw,24px); position:relative; overflow:hidden; transition:border-color 0.3s,transform 0.3s; }
.memb-card:hover { border-color:var(--border2); transform:translateY(-4px); }
.memb-card.featured { border-color:var(--gold); background:linear-gradient(135deg,rgba(201,168,76,0.08),transparent); }
.memb-badge { position:absolute; top:10px; right:10px; background:var(--gold); color:var(--ink); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 7px; border-radius:2px; }
.memb-name  { font-family:var(--serif); font-size:clamp(16px,2.5vw,20px); font-weight:700; color:var(--cream); margin-bottom:5px; }
.memb-bv    { font-size:clamp(24px,4vw,32px); font-weight:700; color:var(--gold); font-family:var(--serif); }
.memb-bv span { font-size:13px; color:var(--text3); }
.memb-desc  { font-size:clamp(11px,1.8vw,12px); color:var(--text2); margin-top:10px; line-height:1.6; }

/* ── RANGOS ────────────────────────────────── */
#rangos { padding:var(--sp-xl) 0; background:linear-gradient(180deg,var(--ink2) 0%,var(--ink) 100%); }
.rangos-track { display:flex; align-items:center; overflow-x:auto; padding:clamp(12px,2vw,20px) 0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.rangos-track::-webkit-scrollbar { display:none; }
.rango-item { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 clamp(12px,2.5vw,24px); position:relative; }
.rango-item:not(:last-child)::after { content:'→'; position:absolute; right:-8px; color:var(--gold); opacity:0.4; font-size:14px; top:clamp(16px,2.5vw,18px); }
.rango-orb { width:clamp(44px,7vw,56px); height:clamp(44px,7vw,56px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(18px,3vw,22px); border:2px solid var(--border); background:var(--ink2); transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s; cursor:pointer; }
.rango-orb:hover { border-color:var(--gold); transform:scale(1.15); box-shadow:0 0 18px rgba(201,168,76,0.3); }
.rango-orb.current { border-color:var(--gold); background:rgba(201,168,76,0.1); }
.rango-name { font-size:clamp(9px,1.5vw,11px); color:var(--text3); text-align:center; white-space:nowrap; }
.rango-name.current { color:var(--gold); }

/* ── PRODUCTOS ─────────────────────────────── */
#productos { padding:var(--sp-2xl) 0; background:var(--ink); }
.productos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:clamp(36px,5vw,60px); }
.prod-card { background:var(--ink2); border:1px solid var(--border); padding:clamp(24px,4vw,40px) clamp(20px,3vw,32px); transition:border-color 0.3s,transform 0.3s; cursor:pointer; position:relative; overflow:hidden; }
.prod-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--green2)); transform:scaleX(0); transition:transform 0.4s; transform-origin:left; }
.prod-card:hover { border-color:var(--border2); transform:translateY(-5px); }
.prod-card:hover::after { transform:scaleX(1); }
.prod-emoji { font-size:clamp(30px,5vw,40px); margin-bottom:clamp(14px,2.5vw,20px); display:block; }
.prod-cat  { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:8px; }
.prod-name { font-family:var(--serif); font-size:clamp(16px,2.5vw,22px); font-weight:700; color:var(--cream); margin-bottom:10px; line-height:1.25; }
.prod-desc { font-size:var(--t-s); color:var(--text2); line-height:1.7; }
.prod-tag  { display:inline-block; margin-top:14px; background:rgba(61,107,79,0.15); border:1px solid rgba(61,107,79,0.3); color:var(--green3); font-size:10px; padding:3px 10px; border-radius:20px; }

/* ── TESTIMONIOS ───────────────────────────── */
#testimonios { padding:var(--sp-2xl) 0; background:var(--ink2); }
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.5vw,24px); margin-top:clamp(36px,5vw,60px); }
.test-card { background:var(--ink); border:1px solid var(--border); border-radius:4px; padding:clamp(24px,3.5vw,36px) clamp(20px,3vw,32px); transition:border-color 0.3s,transform 0.3s; display:flex; flex-direction:column; gap:18px; }
.test-card:hover { border-color:var(--border2); transform:translateY(-4px); }
.test-stars  { color:var(--gold); font-size:13px; letter-spacing:2px; }
.test-text   { font-family:var(--serif); font-size:clamp(14px,2.5vw,17px); font-style:italic; color:var(--cream); line-height:1.65; flex:1; }
.test-author { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); }
.test-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green2)); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; font-family:var(--serif); }
.test-name   { font-size:13px; font-weight:500; color:var(--cream); }
.test-rango  { font-size:10px; color:var(--gold); text-transform:uppercase; letter-spacing:1px; }

/* ── ARIA ──────────────────────────────────── */
#aria { padding:var(--sp-2xl) 0; background:var(--ink); }
.aria-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,80px); align-items:center; }
.aria-feats { display:flex; flex-direction:column; gap:clamp(16px,2.5vw,20px); margin:clamp(24px,4vw,36px) 0; }
.aria-feat  { display:flex; align-items:flex-start; gap:14px; }
.aria-feat-ic { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:rgba(61,107,79,0.15); border:1px solid rgba(61,107,79,0.3); display:flex; align-items:center; justify-content:center; font-size:16px; }
.aria-feat-title { font-size:clamp(13px,2vw,15px); font-weight:500; color:var(--cream); margin-bottom:3px; }
.aria-feat-desc  { font-size:var(--t-s); color:var(--text2); line-height:1.6; }
.aria-mockup { background:#0a0f0a; border:1px solid rgba(74,222,128,0.2); border-radius:16px; overflow:hidden; box-shadow:0 0 50px rgba(74,222,128,0.07); }
.aria-mock-hd { display:flex; align-items:center; gap:10px; padding:12px 18px; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(74,222,128,0.12); }
.aria-mock-orb { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#22c55e,#4ade80); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.aria-mock-title { font-size:13px; font-weight:700; color:#f0fdf4; }
.aria-mock-dot   { width:6px; height:6px; border-radius:50%; background:#4ade80; margin-left:auto; animation:fadeIn 1s ease infinite alternate; }
.aria-msgs { padding:clamp(14px,2.5vw,20px); display:flex; flex-direction:column; gap:10px; }
.msg-ai,.msg-user { border-radius:12px; padding:9px 13px; font-size:clamp(11px,2vw,12px); line-height:1.55; max-width:82%; }
.msg-ai   { background:rgba(255,255,255,0.04); border:1px solid rgba(74,222,128,0.12); color:#bbf7d0; align-self:flex-start; }
.msg-user { background:rgba(74,222,128,0.12); border:1px solid rgba(74,222,128,0.25); color:#f0fdf4; align-self:flex-end; }
.aria-mock-input { display:flex; gap:8px; padding:12px 16px; border-top:1px solid rgba(74,222,128,0.1); }
.aria-mock-field { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(74,222,128,0.12); border-radius:8px; padding:7px 11px; font-size:11px; color:#6b7280; }
.aria-mock-btn   { width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#22c55e,#4ade80); display:flex; align-items:center; justify-content:center; font-size:13px; }

/* ── FORO ──────────────────────────────────── */
#foro { padding:var(--sp-2xl) 0; background:var(--ink2); }
.foro-grid { display:grid; grid-template-columns:2fr 1fr; gap:clamp(24px,4vw,48px); margin-top:clamp(36px,5vw,60px); align-items:start; }
.foro-posts { display:flex; flex-direction:column; gap:2px; }
.foro-post { background:var(--ink); border:1px solid var(--border); padding:clamp(16px,2.5vw,24px) clamp(18px,3vw,28px); display:flex; align-items:flex-start; gap:clamp(12px,2vw,18px); transition:border-color 0.25s,transform 0.25s; cursor:pointer; }
.foro-post:hover { border-color:var(--border2); transform:translateX(4px); }
.foro-av { width:38px; height:38px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg,var(--green),var(--green2)); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; font-family:var(--serif); }
.foro-title { font-size:clamp(13px,2vw,15px); font-weight:500; color:var(--cream); margin-bottom:5px; line-height:1.4; }
.foro-meta  { font-size:10px; color:var(--text3); }
.foro-tag   { margin-left:auto; flex-shrink:0; font-size:9px; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.tag-e { background:rgba(201,168,76,0.1); color:var(--gold);   border:1px solid var(--border); }
.tag-p { background:rgba(61,107,79,0.1);  color:var(--green3); border:1px solid rgba(61,107,79,0.2); }
.tag-m { background:rgba(196,96,58,0.1);  color:#e8896b;       border:1px solid rgba(196,96,58,0.2); }
.foro-sidebar { display:flex; flex-direction:column; gap:clamp(14px,2.5vw,20px); }
.foro-widget { background:var(--ink); border:1px solid var(--border); border-radius:4px; padding:clamp(18px,3vw,24px); }
.foro-widget h4 { font-family:var(--serif); font-size:clamp(14px,2vw,16px); font-weight:700; color:var(--cream); margin-bottom:14px; }
.foro-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:clamp(11px,1.8vw,13px); color:var(--text2); }
.foro-row:last-child { border:none; }
.foro-val { font-weight:600; color:var(--gold); }
.foro-cta { padding:clamp(14px,2.5vw,20px) clamp(18px,3vw,28px); text-align:center; background:var(--ink); border:1px solid var(--border); }

/* ── BLOG ──────────────────────────────────── */
#blog { padding:var(--sp-2xl) 0; background:var(--ink); }
.blog-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2px; margin-top:clamp(36px,5vw,60px); }
.blog-card { background:var(--ink2); border:1px solid var(--border); padding:clamp(24px,3.5vw,40px) clamp(20px,3vw,32px); cursor:pointer; transition:border-color 0.3s,transform 0.3s; display:flex; flex-direction:column; }
.blog-card:hover { border-color:var(--border2); transform:translateY(-4px); }
.blog-tag   { display:inline-block; margin-bottom:14px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:500; }
.blog-title { font-family:var(--serif); font-weight:700; color:var(--cream); line-height:1.25; margin-bottom:12px; }
.blog-card.featured .blog-title { font-size:clamp(18px,3vw,28px); }
.blog-card:not(.featured) .blog-title { font-size:clamp(14px,2.2vw,18px); }
.blog-excerpt { font-size:var(--t-s); color:var(--text2); line-height:1.7; flex:1; }
.blog-footer  { display:flex; align-items:center; justify-content:space-between; margin-top:clamp(16px,2.5vw,24px); padding-top:14px; border-top:1px solid var(--border); font-size:10px; color:var(--text3); }
.blog-leer    { color:var(--gold); font-weight:500; }

/* ── CTA ───────────────────────────────────── */
#cta { padding:var(--sp-2xl) 0; background:linear-gradient(135deg,var(--green) 0%,var(--ink2) 60%); position:relative; overflow:hidden; text-align:center; }
#cta::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(201,168,76,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.05) 1px,transparent 1px); background-size:clamp(40px,6vw,60px) clamp(40px,6vw,60px); }
.cta-inner { position:relative; z-index:10; max-width:640px; margin:0 auto; padding:0 var(--gap); }
.cta-h2  { font-family:var(--serif); font-size:clamp(34px,7vw,68px); font-weight:900; line-height:1.0; letter-spacing:-1.5px; color:var(--cream); margin-bottom:18px; }
.cta-h2 em { font-style:italic; color:var(--gold3); display:block; }
.cta-lead   { font-size:var(--t-m); color:var(--text2); line-height:1.75; margin-bottom:clamp(28px,5vw,44px); }
.cta-btns   { display:flex; align-items:center; justify-content:center; gap:clamp(12px,3vw,20px); flex-wrap:wrap; }

/* ── CONTACTO ──────────────────────────────── */
#contacto { padding:var(--sp-2xl) 0; background:var(--ink2); }
.contacto-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,80px); align-items:start; }
.contacto-info { display:flex; flex-direction:column; gap:clamp(20px,3.5vw,28px); }
.contacto-item { display:flex; align-items:flex-start; gap:14px; }
.contacto-ic   { width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; }
.contacto-lbl  { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.contacto-val  { font-size:clamp(13px,2vw,15px); color:var(--cream); }
.aria-link     { display:flex; align-items:center; gap:8px; color:var(--green3); font-size:clamp(12px,2vw,14px); text-decoration:none; margin-top:4px; transition:color 0.2s; }
.aria-link:hover { color:var(--green2); }
.form-wrap { display:flex; flex-direction:column; gap:clamp(12px,2vw,16px); }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }
.form-group input,
.form-group textarea,
.form-group select {
  background:var(--ink); border:1px solid var(--border); color:var(--text);
  padding:clamp(10px,2vw,13px) clamp(12px,2vw,16px);
  font-size:clamp(13px,2vw,14px); font-weight:300;
  border-radius:2px; outline:none; transition:border-color 0.2s; width:100%;
  -webkit-appearance:none; appearance:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:var(--border2); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text3); }
.form-group textarea { min-height:90px; resize:vertical; }
.form-group select {
  cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7268' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
}
.form-group select option { background:var(--ink2); color:var(--text); }
.form-submit {
  background:var(--gold); color:var(--ink);
  padding:clamp(12px,2vw,14px); font-size:clamp(12px,2vw,13px);
  font-weight:600; letter-spacing:2px; text-transform:uppercase;
  border:none; cursor:pointer; border-radius:2px;
  transition:background 0.2s,transform 0.2s; margin-top:6px; width:100%;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.form-submit:hover  { background:var(--gold2); transform:translateY(-2px); }
.form-submit:active { transform:translateY(0); }

/* ── FOOTER ────────────────────────────────── */
footer { background:#080808; padding:clamp(40px,7vw,60px) 0 clamp(24px,4vw,30px); border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); margin-bottom:clamp(32px,5vw,48px); }
.footer-brand p { font-size:clamp(11px,1.8vw,13px); color:var(--text3); line-height:1.7; max-width:220px; margin-top:12px; }
.footer-col h4  { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:clamp(14px,2.5vw,20px); font-weight:500; }
.footer-col ul  { list-style:none; display:flex; flex-direction:column; gap:clamp(8px,1.5vw,12px); }
.footer-col li a { font-size:clamp(11px,1.8vw,13px); color:var(--text3); text-decoration:none; transition:color 0.2s; }
.footer-col li a:hover { color:var(--cream); }
.footer-bottom { padding-top:clamp(18px,3vw,28px); border-top:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; font-size:11px; color:var(--text3); gap:16px; flex-wrap:wrap; }
.footer-seo { display:flex; gap:clamp(12px,2vw,20px); flex-wrap:wrap; }
.footer-seo a { color:var(--text3); text-decoration:none; font-size:10px; transition:color 0.2s; }
.footer-seo a:hover { color:var(--gold); }

/* ═══════════════════════════════════════════
   RESPONSIVE GLOBAL
═══════════════════════════════════════════ */
@media (max-width:1024px) {
  .plan-hd          { grid-template-columns:1fr; }
  .bonos-grid       { grid-template-columns:repeat(2,1fr); }
  .memb-grid        { grid-template-columns:repeat(2,1fr); }
  .sobre-grid       { grid-template-columns:1fr; }
  .sobre-visual     { max-width:480px; margin:0 auto; width:100%; }
  .aria-grid        { grid-template-columns:1fr; }
  .contacto-grid    { grid-template-columns:1fr; }
  .foro-grid        { grid-template-columns:1fr; }
  .footer-grid      { grid-template-columns:1fr 1fr; }
  .test-grid        { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .productos-grid   { grid-template-columns:1fr 1fr; }
  .blog-grid        { grid-template-columns:1fr; }
  .test-grid        { grid-template-columns:1fr; }
  .footer-grid      { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  :root { --gap:16px; }
  .bonos-grid       { grid-template-columns:1fr; }
  .memb-grid        { grid-template-columns:1fr 1fr; }
  .productos-grid   { grid-template-columns:1fr; }
  .foro-tag         { display:none; }
  .cta-btns         { flex-direction:column; align-items:center; width:100%; }
  .cta-btns .btn-primary,
  .cta-btns .btn-whatsapp { width:100%; justify-content:center; text-align:center; }
  .footer-grid      { grid-template-columns:1fr; }
  .footer-bottom    { flex-direction:column; }
  .footer-seo       { flex-direction:column; gap:8px; }
  .sobre-frame-lbl  { flex-direction:column; align-items:flex-start; }
}
@media (max-width:360px) {
  :root { --gap:14px; }
  .memb-grid        { grid-template-columns:1fr; }
}