/* v19: Scope por rol para que estilos sensibles no se pisen */
body[data-role="cliente"] .cli-only { display: block; }
body[data-role="emprendedor"] .cli-only { display: none !important; }

body[data-role="emprendedor"] .emp-only { display: block; }
body[data-role="cliente"] .emp-only { display: none !important; }

/* Si tenés reglas MUY globales (p.ej. .card, .grid),
   llévalas a:
   body[data-role="cliente"] .card { ... }
   body[data-role="emprendedor"] .card { ... }
   para las que afecten layout. */
.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);background:rgba(255,255,255,.9);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__logo{width:36px;height:36px;border-radius:10px;background:radial-gradient(circle at 30% 30%,var(--tm-turq),var(--tm-yellow));box-shadow:0 6px 16px rgba(0,0,0,.12) inset}
.brand__name{font-family:Sansita,serif;font-weight:800;letter-spacing:.2px;color:#111;font-size:1.25rem}
.main-menu a{text-decoration:none;margin-left:14px;font-weight:800}
.hero{padding:48px 0 8px}
.hero-title{font-family:Sansita,serif;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;margin:0 0 10px;color:#111}
.hero-sub{color:var(--muted);margin:0}
.grid{display:grid;gap:22px}
@media (min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr;align-items:start}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 6px 18px rgba(34,34,34,.05)}
.site-footer{margin:28px 0 40px;color:var(--muted);font-size:.9rem;text-align:center}
.space-16{height:16px}.space-24{height:24px}

/* --- Avatar cuadrado --- */
.avatar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 120px;          /* tamaño cuadrado */
  height: 120px;
  border-radius: 12px;   /* bordes redondeados suaves */
  background-color: #f3f4f6;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--border, #ccc);
  flex-shrink: 0;
}

.avatar input[type="file"] {
  display: none;
}