/* 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. */


.badge{display:inline-flex;align-items:center;gap:8px;background:#101010;color:#fff;border-radius:999px;padding:6px 12px;font-size:.86rem;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--tm-yellow),color-mix(in srgb,var(--tm-yellow) 70%,var(--tm-turq)));color:#0b0b0b}
.btn-outline{background:#fff;border:2px solid var(--tm-turq);color:#0b0b0b}

.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.socials{grid-template-columns:repeat(4,minmax(0,1fr))}}
.social-btn{display:flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--border);background:#fff;border-radius:14px;padding:12px 14px;font-weight:800;color:#111;box-shadow:0 4px 14px rgba(0,0,0,.05)}

.contact-list{display:grid;gap:10px}
.contact-item{display:flex;align-items:center;gap:12px}
.ico{width:20px;height:20px;display:inline-block;border-radius:6px;background:#eee}
.ico-wa{background:conic-gradient(from 0deg at 50% 50%,#25D366 0 75%,#e5e5e5 75% 100%)}
.ico-mail{background:linear-gradient(45deg,#999,#ddd)}
.ico-ig{background:radial-gradient(circle at 30% 30%,#feda75,#d62976,#962fbf,#4f5bd5)}
.ico-fb{background:#1877f2}
.ico-tt{background:#000}
.ico-pin{background:#e60023}

form{display:grid;gap:12px}
label{font-weight:800}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font:inherit;background:#fff}
textarea{min-height:130px;resize:vertical}
.row{display:grid;gap:12px}
@media (min-width:700px){.row-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hint{color:var(--muted);font-size:.9rem}
.consent{display:flex;align-items:center;gap:10px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.faq-item{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:#fff;transition:border-color .2s ease;box-shadow:0 1px 0 #f5f5f5 inset}
.faq-item[open]{border-color:color-mix(in srgb,var(--tm-turq) 30%,var(--border))}
.faq-summary{list-style:none;cursor:pointer;font-weight:800}
.faq-content{color:#374151;padding:10px 0 2px 0}

.contact-illustration{width:100%;min-height:180px;background-color:#f8f8f8;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Si querés usar background-image, descomentá esto y ajustá ruta:
.contact-illustration{background-image:url('../img/ui/contacto-ilustracion.webp');background-size:cover;background-position:center}
*/
/* --- 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;
}