/* =========================================================
   NEUROSPARK — Hoja de estilos base
   Paleta calmada inspirada en el logo (azul profundo + dorado)
   Principios: confort sensorial, navegación predictiva, lenguaje directo
   ========================================================= */

:root{
  /* Paleta principal */
  --color-bg: #F8F6F1;         /* crema suave, fondo general */
  --color-bg-alt: #EAF4FB;     /* azul muy claro, secciones alternas */
  --color-surface: #FFFFFF;    /* tarjetas */
  --color-primary: #0B4F6C;    /* azul profundo (logo) */
  --color-primary-light: #3D8FB0;
  --color-primary-soft: #DCEEF6;
  --color-accent: #F2A93B;     /* dorado (logo), uso puntual */
  --color-accent-soft: #FCEBCB;
  --color-text: #223138;
  --color-text-soft: #5B6B76;
  --color-border: #DCE6EA;
  --color-success: #6FA98B;
  --color-success-soft: #E4F2EB;
  --color-warning: #C97B3B;
  --color-warning-soft: #FBEEE1;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --shadow-soft: 0 8px 24px rgba(11,79,108,0.08);
  --shadow-softer: 0 4px 14px rgba(11,79,108,0.06);
  --font-base: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --transition: 220ms ease;
}

/* Tema oscuro (elegido en el onboarding, paso 1) */
[data-theme="oscuro"]{
  --color-bg: #10222B;
  --color-bg-alt: #16303D;
  --color-surface: #1B3A48;
  --color-primary: #7FC1DE;
  --color-primary-light: #9ED4EA;
  --color-primary-soft: #234351;
  --color-text: #EAF3F6;
  --color-text-soft: #B7CBD2;
  --color-border: #2C4B58;
  --color-accent: #F2C078;
  --color-accent-soft: #3A2F1E;
  --color-success: #8FCBAB;
  --color-success-soft: #1F3A2E;
}

/* Tema "profesional" — portal exclusivo de consultores/as, deliberadamente
   distinto (grafito + azul acero) del tema cálido y sensorial de los usuarios. */
[data-theme="profesional"]{
  --color-bg: #F4F6F8;
  --color-bg-alt: #E9EDF1;
  --color-surface: #FFFFFF;
  --color-primary: #1F2933;
  --color-primary-light: #3E4C59;
  --color-primary-soft: #E4E7EB;
  --color-accent: #2F6690;
  --color-accent-soft: #E1ECF3;
  --color-text: #1F2933;
  --color-text-soft: #616E7C;
  --color-border: #D9DEE4;
  --font-base: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
[data-theme="profesional"] .side-link.active{ background: var(--color-primary); color:#fff; }
[data-theme="profesional"] .brand em{ color: var(--color-accent); font-style:normal; }

/* Modo "movimiento reducido" — control sensorial */
[data-motion="reducido"] *{
  animation: none !important;
  transition: none !important;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

img{ max-width:100%; display:block; }
a{ color: var(--color-primary); text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-weight:800;
  color: var(--color-text);
  line-height:1.25;
  margin:0 0 .5em 0;
}
p{ margin:0 0 1em 0; color: var(--color-text-soft); }

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top:0;
  z-index: 50;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 40px; width:40px; object-fit:contain; filter: drop-shadow(0 3px 4px rgba(11,79,108,.35)); }
.brand span{ font-weight:800; font-size:1.15rem; color: var(--color-primary); letter-spacing:.2px; }
.brand span em{ color: var(--color-accent); font-style: normal; }

.topbar nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 640px){
  .topbar{ flex-wrap:wrap; gap:10px; padding: 14px 16px; }
  .topbar nav{ width:100%; justify-content:center; gap:6px; }
  .topbar nav a{ padding:7px 10px; font-size:.85rem; }
}
.topbar nav a{
  padding: 8px 14px;
  border-radius: var(--radius-s);
  color: var(--color-text-soft);
  font-weight:600;
  font-size:.95rem;
}
.topbar nav a:hover, .topbar nav a.active{ background: var(--color-primary-soft); color: var(--color-primary); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 22px;
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  font-weight:700;
  font-size:.98rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background:#093f56; box-shadow: var(--shadow-soft); }
.btn-accent{ background: var(--color-accent); color:#3A2410; }
.btn-accent:hover{ box-shadow: var(--shadow-soft); }
.btn-outline{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary-soft); }
.btn-ghost{ background: transparent; color: var(--color-text-soft); }
.btn-ghost:hover{ background: var(--color-bg-alt); }
.btn-block{ width:100%; }
.btn-sm{ padding: 7px 14px; font-size:.85rem; border-radius: 8px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Tarjetas ---------- */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 22px;
  box-shadow: var(--shadow-softer);
}
.card-accent-top{ border-top: 4px solid var(--color-primary); }

/* ---------- Hero con olas animadas (movimiento sinuoso y rítmico) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  padding: 70px 24px 0;
  text-align:center;
}
.hero-inner{ max-width: 760px; margin:0 auto; position:relative; z-index:2; }
.hero .eyebrow{
  display:inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.5px;
  padding:6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.hero-logo{
  width: 260px; height:auto; object-fit:contain;
  margin: 0 auto 22px; display:block;
  filter:
    drop-shadow(0 10px 8px rgba(11,79,108,.28))
    drop-shadow(0 22px 20px rgba(11,79,108,.16));
  animation: logo-arrive .8s ease, logo-float 5s ease-in-out 1s infinite;
}
@keyframes logo-arrive{
  0%{ opacity:0; transform: translateY(-14px) scale(.88); }
  100%{ opacity:1; transform:none; }
}
@keyframes logo-float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-9px) rotate(-1deg); }
}
@media (max-width: 860px){
  .hero-logo{ width:190px; }
}
.hero h1{ font-size: 2.6rem; }
.hero h1 em{ color: var(--color-primary); font-style: normal; }
.hero p.lead{ font-size:1.15rem; max-width:560px; margin:0 auto 28px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom: 40px; }

.waves{ position:relative; height:120px; margin-top: 20px; }
.waves svg{ position:absolute; bottom:0; left:0; width:200%; height:100%; }
.wave-back{ animation: wave-move 18s linear infinite; opacity:.5; }
.wave-mid{ animation: wave-move 12s linear infinite reverse; opacity:.7; }
.wave-front{ animation: wave-move 9s linear infinite; }
@keyframes wave-move{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ---------- Secciones genéricas ---------- */
.section{ padding: 64px 24px; }
.section-alt{ background: var(--color-bg-alt); }
.section-head{ text-align:center; max-width:640px; margin: 0 auto 40px; }
.grid{ display:grid; gap: 20px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .hero h1{ font-size:2rem; }
}

.feature-icon{
  width:44px; height:44px; border-radius:12px;
  background: var(--color-primary-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:14px;
}

/* ---------- Formularios ---------- */
.field{ margin-bottom: 18px; text-align:left; }
.field label{ display:block; font-weight:700; margin-bottom:6px; font-size:.92rem; }
.field .hint{ font-size:.8rem; color: var(--color-text-soft); margin-top:4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select, textarea{
  width:100%;
  padding: 11px 14px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .96rem;
  font-family: inherit;
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--color-primary-light); }
textarea{ resize: vertical; min-height: 90px; }

.choice-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.choice{
  display:flex; align-items:center; gap:8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  font-size:.9rem;
  cursor:pointer;
  transition: all var(--transition);
}
.choice:hover{ border-color: var(--color-primary-light); }
.choice.is-selected{ background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight:700; }
.choice input{ accent-color: var(--color-primary); }

.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:700;
  padding: 4px 10px; border-radius:999px;
  background: var(--color-success-soft); color: var(--color-success);
}
.badge-warning{ background: var(--color-warning-soft); color: var(--color-warning); }
.badge-accent{ background: var(--color-accent-soft); color:#8a5a12; }

.alert{
  border-radius: var(--radius-s);
  padding: 12px 16px;
  font-size:.88rem;
  border: 1px solid;
  margin-bottom: 16px;
}
.alert-info{ background: var(--color-primary-soft); border-color: var(--color-primary-light); color: var(--color-primary); }
.alert-warning{ background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.alert-error{ background:#FBE4E4; border-color:#D98B8B; color:#A23C3C; }

/* ---------- Onboarding (registro) ---------- */
.wizard{ max-width: 640px; margin: 40px auto; padding: 0 24px 60px; }
.wizard-progress{ display:flex; gap:8px; margin-bottom: 28px; }
.wizard-progress .dot{ flex:1; height:6px; border-radius:4px; background: var(--color-border); }
.wizard-progress .dot.is-active, .wizard-progress .dot.is-done{ background: var(--color-primary); }
.wizard-step-label{ font-size:.82rem; font-weight:700; color: var(--color-primary); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.wizard-actions{ display:flex; justify-content:space-between; margin-top: 28px; gap: 12px; }

/* ---------- Dashboard shell ---------- */
.app-shell{ display:flex; min-height: 100vh; }
.sidebar{
  width: 240px;
  flex-shrink:0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 20px 14px;
  display:flex; flex-direction:column; gap:4px;
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{ padding: 6px 10px 20px; }
.side-link{
  display:flex; align-items:center; gap:12px;
  padding: 11px 14px; border-radius: var(--radius-s);
  color: var(--color-text-soft); font-weight:600; font-size:.92rem;
}
.side-link .ic{ font-size:1.1rem; width:22px; text-align:center; }
.side-link:hover{ background: var(--color-bg-alt); color: var(--color-text); }
.side-link.active{ background: var(--color-primary); color:#fff; }
.sidebar-footer{ margin-top:auto; padding-top:14px; border-top: 1px solid var(--color-border); }

.main-area{ flex:1; min-width:0; }
.main-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 28px; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface); position: sticky; top:0; z-index:10;
}
.main-content{ padding: 28px; max-width: 1080px; }
.view{ display:none; }
.view.active{ display:block; animation: fade-in .25s ease; }
@keyframes fade-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }

#btnMenuMobile{ display:none; }
.sidebar-backdrop{ display:none; }

@media (max-width: 900px){
  .sidebar{ position:fixed; left:-260px; top:0; z-index:80; box-shadow: var(--shadow-soft); transition: left var(--transition); }
  .sidebar.open{ left:0; }
  .main-content{ padding: 18px; }
  #btnMenuMobile{ display:inline-flex; }
  .sidebar-backdrop.open{
    display:block; position:fixed; inset:0; background:rgba(20,30,40,.4); z-index:70;
  }
}

/* ---------- Perfil / usuarios ---------- */
.avatar{
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.2rem; flex-shrink:0;
}
.avatar-sm{ width:40px; height:40px; font-size:.95rem; }

.match-card{ display:flex; flex-direction:column; gap:10px; }
.match-card .top{ display:flex; align-items:center; gap:12px; }
.match-card .meta{ font-size:.82rem; color: var(--color-text-soft); }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ background: var(--color-bg-alt); color: var(--color-primary); font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.affinity{ font-weight:800; color: var(--color-success); }

/* ---------- Chat ---------- */
.chat-layout{ display:grid; grid-template-columns: 280px 1fr; gap:20px; height: 620px; }
.chat-list{ overflow-y:auto; border:1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); }
.chat-list-item{ display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--color-border); cursor:pointer; }
.chat-list-item:hover, .chat-list-item.active{ background: var(--color-bg-alt); }
.chat-window{ display:flex; flex-direction:column; border:1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); overflow:hidden; }
.chat-messages{ flex:1; overflow-y:auto; padding: 18px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:70%; padding:10px 14px; border-radius: 14px; font-size:.92rem; }
.msg.mine{ align-self:flex-end; background: var(--color-primary); color:#fff; border-bottom-right-radius:4px; }
.msg.theirs{ align-self:flex-start; background: var(--color-bg-alt); border-bottom-left-radius:4px; }
.msg .tone{ display:block; font-size:.7rem; opacity:.8; margin-top:4px; font-weight:700; }
.chat-input-row{ display:flex; gap:8px; padding: 12px; border-top:1px solid var(--color-border); flex-wrap:wrap; }
.tone-tags{ display:flex; gap:6px; padding: 0 12px 10px; flex-wrap:wrap; }
.tone-tags button{ background: var(--color-bg-alt); border:none; padding:5px 11px; border-radius:999px; font-size:.75rem; font-weight:700; color: var(--color-primary); }
.tone-tags button:hover{ background: var(--color-primary-soft); }
.chat-input-row input{ flex:1; }
@media (max-width:800px){ .chat-layout{ grid-template-columns:1fr; height:auto; } .chat-list{ height:220px; } .chat-window{ height:480px; } }

/* ---------- Juegos ---------- */
.memory-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; max-width:420px; margin: 0 auto; }
.memory-card{
  aspect-ratio:1; border-radius: 12px; background: var(--color-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; cursor:pointer; user-select:none; transition: transform .2s ease;
}
.memory-card.flipped, .memory-card.matched{ background: var(--color-surface); border:2px solid var(--color-primary-soft); color: var(--color-text); }
.memory-card.matched{ opacity:.55; cursor:default; }

.breathe-circle{
  width: 180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, var(--color-primary-light), var(--color-primary));
  margin: 30px auto; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; letter-spacing:.5px;
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform: scale(.75); }
  50%{ transform: scale(1.15); }
}

/* ---------- Ideas / foro ---------- */
.idea-card{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--color-border); }
.idea-vote{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.idea-vote button{ background:var(--color-bg-alt); border:none; border-radius:8px; width:32px; height:28px; font-weight:800; color:var(--color-primary); }

/* ---------- Encuentros ---------- */
.encuentro-card{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.encuentro-badge{ background: var(--color-success-soft); color: var(--color-success); font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px; }

/* ---------- Tabla / lista genérica ---------- */
.list-plain{ list-style:none; margin:0; padding:0; }
hr.soft{ border:none; border-top:1px solid var(--color-border); margin: 24px 0; }

footer.site-footer{
  padding: 30px 24px; text-align:center; color: var(--color-text-soft); font-size:.85rem;
  border-top: 1px solid var(--color-border);
}

.notice-banner{
  background: var(--color-primary);
  color:#fff; text-align:center; font-size:.85rem; padding: 10px 16px;
}
.notice-banner strong{ color: var(--color-accent); }

.toast{
  position: fixed; bottom: 24px; right:24px; z-index:200;
  background: var(--color-text); color:#fff; padding: 12px 18px;
  border-radius: var(--radius-s); box-shadow: var(--shadow-soft);
  font-size:.88rem; opacity:0; transform: translateY(10px); transition: all .3s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:none; }

/* ---------- Modal (ver perfil antes de aceptar/rechazar) ---------- */
.modal-overlay{
  position: fixed; inset:0; z-index:300; background: rgba(20,30,40,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  position: relative; background: var(--color-surface); border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft); padding: 24px; max-width: 440px; width:100%;
  max-height: 85vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:12px; right:12px; background:none; border:none;
  font-size:1.1rem; color: var(--color-text-soft); cursor:pointer; line-height:1;
}
.modal-box .top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.modal-box .meta{ color: var(--color-text-soft); font-size:.85rem; }
.modal-box .tag-row{ margin: 10px 0; }
.modal-box .modal-actions{ display:flex; gap:10px; margin-top:16px; }
.modal-box .modal-actions .btn{ flex:1; }

/* ---------- Avatar picker (registro / perfil) ---------- */
.avatar-picker-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.avatar-picker-tabs button{ flex:1; padding:9px; border-radius: var(--radius-s); border:1.5px solid var(--color-border); background: var(--color-surface); font-weight:700; font-size:.85rem; color: var(--color-text-soft); }
.avatar-picker-tabs button.is-active{ background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.sim-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; }
.sim-option{ aspect-ratio:1; border-radius:12px; border:2px solid var(--color-border); background: var(--color-surface); font-size:1.5rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sim-option.is-selected{ border-color: var(--color-primary); background: var(--color-primary-soft); }
.avatar-preview{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.avatar-preview .avatar{ width:64px; height:64px; font-size:1.6rem; }

/* ---------- Planes ---------- */
.plan-card{ display:flex; flex-direction:column; gap:10px; position:relative; }
.plan-card.is-current{ border-color: var(--color-primary); box-shadow: var(--shadow-soft); }
.plan-price{ font-size:1.5rem; font-weight:800; color: var(--color-primary); }
.plan-features{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:.88rem; }
.plan-features li:before{ content:"✓ "; color: var(--color-success); font-weight:800; }
.plan-ribbon{ position:absolute; top:14px; right:14px; }

/* ---------- Bloqueo de funciones premium ---------- */
.locked{ position:relative; opacity:.6; filter: grayscale(.3); pointer-events:none; }
.lock-note{ display:flex; align-items:center; gap:8px; background: var(--color-accent-soft); color:#8a5a12; font-size:.82rem; font-weight:700; padding:8px 12px; border-radius: var(--radius-s); margin-top:8px; }
.lock-note a, .lock-note button{ font-weight:800; }

/* ---------- Chat: adjuntos, notas de voz, videollamada ---------- */
.chat-attach{ max-width:220px; border-radius:12px; margin-top:6px; display:block; }
.chat-attach-actions{ display:flex; gap:6px; margin-top:4px; }
.chat-attach-actions button{ background:none; border:none; font-size:.7rem; text-decoration:underline; color:inherit; opacity:.85; padding:0; }
.voice-note{ display:flex; align-items:center; gap:8px; }
.voice-note .wave{ display:flex; gap:2px; align-items:flex-end; height:18px; }
.voice-note .wave span{ width:3px; background: currentColor; opacity:.7; }
.chat-toolbar{ display:flex; gap:6px; align-items:center; padding: 0 12px 8px; }
.chat-toolbar button{ background: var(--color-bg-alt); border:none; width:34px; height:34px; border-radius:50%; font-size:1rem; }
.chat-toolbar button:hover{ background: var(--color-primary-soft); }
.retention-note{ font-size:.76rem; color: var(--color-text-soft); padding: 6px 16px; border-bottom:1px solid var(--color-border); }

.call-modal-backdrop{ position:fixed; inset:0; background:rgba(11,25,32,.72); display:flex; align-items:center; justify-content:center; z-index:300; }
.call-modal{ background: var(--color-surface); border-radius: var(--radius-l); padding:34px; text-align:center; max-width:360px; }
.call-avatar{ width:96px; height:96px; border-radius:50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin: 0 auto 16px; animation: breathe 3s ease-in-out infinite; }

/* ---------- Comunidades ---------- */
.grupo-card{ display:flex; justify-content:space-between; align-items:center; gap:12px; }