:root{
  --ink:#2B1B29; --paper:#FBF3E7; --paper-2:#F3E7D6;
  --plum:#4A1F42; --plum-2:#5E2A54; --gold:#E7A93C; --coral:#E2543A;
  --line: rgba(43,27,41,0.14); --shadow: 0 14px 30px -14px rgba(43,27,41,0.35);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); font-family:'Inter',sans-serif; color:var(--ink);}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px 60px;}

.perfil-header{
  background:var(--plum); color:var(--paper); display:flex; align-items:center;
  justify-content:space-between; padding:16px 24px; border-bottom:3px solid var(--gold);
}
.perfil-logo{font-family:'Archivo Black',sans-serif; font-size:19px; color:var(--paper); text-decoration:none;}
.perfil-logo span{color:var(--gold);}
.perfil-logout{background:none; border:1.5px solid rgba(251,243,231,0.4); color:var(--paper); padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700;}
.perfil-logout:hover{border-color:var(--gold); color:var(--gold);}

.perfil-vacio{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:80px 20px; text-align:center;
}
.perfil-btn{background:var(--plum); color:var(--paper); padding:11px 24px; border-radius:999px; font-weight:800; text-decoration:none; font-size:14px;}
.perfil-btn:hover{background:var(--coral);}
.perfil-spinner{
  width:32px; height:32px; border-radius:50%; border:3px solid var(--line);
  border-top-color:var(--coral); animation:perfil-girar .7s linear infinite;
}
@keyframes perfil-girar{ to{ transform:rotate(360deg); } }

.perfil-top{display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 0 24px;}
.perfil-avatar-wrap{position:relative; margin-bottom:14px;}
.perfil-avatar{
  width:110px; height:110px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); display:block;
}
.perfil-avatar-fallback{
  background:var(--plum); color:var(--paper); display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Black',sans-serif; font-size:34px;
}
.perfil-avatar-edit{
  position:absolute; bottom:2px; right:2px; width:32px; height:32px; border-radius:50%;
  background:var(--gold); color:var(--plum); display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; border:2px solid var(--paper);
}
.perfil-avatar-edit:hover{background:var(--coral); color:var(--paper);}
#nombreComprador{font-family:'Bebas Neue',sans-serif; font-size:30px; margin:4px 0 2px;}
.perfil-email{font-size:13px; color:#8a7e83; margin:0;}

.perfil-tabs{display:flex; justify-content:center; gap:8px; border-bottom:1px solid var(--line); margin-bottom:24px;}
.perfil-tab{background:none; border:none; padding:12px 20px; font-weight:700; font-size:14px; color:#8a7e83; border-bottom:2px solid transparent; margin-bottom:-1px;}
.perfil-tab.active{color:var(--plum); border-bottom-color:var(--coral);}

.perfil-proximamente{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:60px 20px; text-align:center; color:#8a7e83; font-size:14px;
}
.local-seguido-card{
  border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:26px; background:#fff;
}
.local-seguido-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.local-seguido-info{display:flex; align-items:center; gap:12px;}
.local-seguido-avatar{width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--plum);}
.local-seguido-avatar-fallback{
  width:44px; height:44px; border-radius:50%; background:var(--plum); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:'Archivo Black',sans-serif; font-size:14px;
}
.local-seguido-nombre{font-weight:800; font-size:15px;}
.local-seguido-dir{font-size:12px; color:#8a7e83;}
.dejar-seguir-btn{background:none; border:1.5px solid var(--line); color:#8a7e83; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700;}
.dejar-seguir-btn:hover{border-color:var(--coral); color:var(--coral);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px;}
.card{background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:box-shadow .2s ease;}
.card:hover{box-shadow:var(--shadow);}
.card-media{position:relative; aspect-ratio:1/1; background:var(--paper-2); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--plum);}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-media svg{width:38%; height:38%; opacity:.5;}
.card-body{padding:13px 14px 15px;}
.card-shop{font-size:11px; color:var(--coral); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px;}
.card-name{font-size:14px; font-weight:700; line-height:1.25; margin-bottom:6px;}
.card-price{font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:var(--plum);}
.fav-heart{
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.9); color:var(--coral); font-size:15px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.empty-state{grid-column:1/-1; text-align:center; padding:50px 20px; color:#8a7e83; font-size:14px;}
/* ---------- FIX GRID MOBILE (celular) — favoritos y locales que sigo ---------- */
/* Mismo ajuste que ya se hizo en el catálogo principal (Styles.css): en
   celular el grid quedaba en 1 sola columna con los productos gigantes,
   porque minmax(200px,1fr) es muy ancho para el espacio disponible en una
   pantalla chica. Se achica el piso de minmax() y el padding lateral SOLO
   en mobile, para que entren 2 columnas como en el resto del sitio. No
   toca desktop/tablet. */
@media (max-width:640px){
  .wrap{padding:0 16px 60px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
}