:root{
  --wine:#40282c;
  --gold:#c9a84c;
  --bg:#fafaf8;
  --border:#e6e1d8;
  --muted:#7d7670;
  --white:#ffffff;
  --radius:16px;
  --transition:240ms cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--wine);font-family:'Inter',sans-serif;font-weight:300;color:var(--wine);min-height:100vh;display:flex;justify-content:center;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

/* ===== WRAPPER CENTRADO ===== */
.card-wrap{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:24px 16px;
  background:var(--wine);
}
.card{
  width:100%;
  max-width:430px;
  background:var(--bg);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}

/* ===== 1. QR TOGGLE ===== */
.qr-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--wine);
  color:#fff;
  border:none;
  padding:16px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background var(--transition);
}
.qr-toggle:hover{background:#4d3034;}
.qr-toggle-icon svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2;}
.qr-toggle-icon--right{display:none;}

.qr-panel{
  background:#fff;
  padding:28px 20px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.qr-panel[hidden]{display:none;}
.qr-image{
  width:80%;
  max-width:240px;
  margin:0 auto;
  border-radius:12px;
}

/* ===== 2. LOGO ===== */
.card-logo{
  background:var(--wine);
  display:flex;
  justify-content:center;
  padding:24px 0 18px;
}
.card-logo img{height:56px;width:auto;border-radius:8px;}

/* ===== 3. COVER ===== */
.card-cover{
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  background:var(--border);
}
.card-cover img{width:100%;height:100%;object-fit:cover;}

/* ===== 4. FOTO DE PERFIL ===== */
.card-profile{
  width:128px;
  height:128px;
  border-radius:50%;
  border:5px solid var(--bg);
  overflow:hidden;
  margin:-64px auto 0;
  position:relative;
  z-index:2;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  background:var(--bg);
}
.card-profile img{width:100%;height:100%;object-fit:cover;}

/* ===== 5. DATOS PRINCIPALES ===== */
.card-main{
  text-align:center;
  padding:16px 24px 0;
}
.card-main h1{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--wine);
  margin-bottom:4px;
}
.card-role{
  font-size:13.5px;
  letter-spacing:.5px;
  color:var(--gold);
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:10px;
}
.card-tags{
  font-size:12.5px;
  color:var(--muted);
}

/* ===== 6. CREDENCIALES ===== */
.credentials{
  margin:22px 20px 6px;
  background:rgba(201,168,76,.05);
  border:1px solid rgba(201,168,76,.35);
  border-radius:var(--radius);
  padding:18px 18px;
}
.credentials-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.credentials-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--wine);
  line-height:1.4;
}
.cred-icon{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(201,168,76,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cred-icon svg{width:11px;height:11px;stroke:var(--gold);fill:none;stroke-width:2;}

/* ===== 7. BOTONES PRINCIPALES (GRID) ===== */
.action-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px 8px;
  padding:26px 20px 8px;
}
.action-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--wine);
  font-size:11.5px;
  font-weight:500;
  text-align:center;
}
.action-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--gold),#b58f3d);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:transform var(--transition),box-shadow var(--transition);
  box-shadow:0 6px 16px rgba(201,168,76,.3);
}
.action-icon svg{width:22px;height:22px;}
.action-item:hover .action-icon{transform:translateY(-3px);box-shadow:0 10px 22px rgba(201,168,76,.4);}

/* ===== 8. BOTÓN VCF ===== */
.btn-vcf{
  display:block;
  margin:14px 20px 4px;
  text-align:center;
  background:var(--wine);
  color:#fff;
  text-decoration:none;
  padding:16px;
  border-radius:12px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.3px;
  transition:background var(--transition),transform var(--transition);
}
.btn-vcf:hover{background:#522f35;transform:translateY(-2px);}

/* ===== 9. COMPARTIR ===== */
.share-block{
  text-align:center;
  padding:30px 20px 8px;
}
.share-title{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
  font-weight:600;
}
.share-grid{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.share-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--wine);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform var(--transition),background var(--transition),color var(--transition),border-color var(--transition);
}
.share-btn svg{width:18px;height:18px;}
.share-btn:hover{transform:translateY(-3px);}
.share-fb:hover{background:#1877f2;border-color:#1877f2;color:#fff;}
.share-wa:hover{background:#25d366;border-color:#25d366;color:#fff;}
.share-email:hover{background:var(--wine);border-color:var(--wine);color:#fff;}
.share-tg:hover{background:#0088cc;border-color:#0088cc;color:#fff;}
.share-copy:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.share-toast{
  margin-top:14px;
  font-size:12.5px;
  color:var(--wine);
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.35);
  border-radius:100px;
  padding:8px 16px;
  display:inline-block;
  transition:opacity .3s ease;
}
.share-toast[hidden]{display:none;}

/* ===== 10. INFO ADICIONAL ===== */
.extra-info{
  margin:24px 20px 0;
  border-top:1px solid var(--border);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.extra-item{display:flex;align-items:flex-start;gap:12px;}
.extra-icon{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(64,40,44,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.extra-icon svg{width:16px;height:16px;stroke:var(--wine);}
.extra-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.extra-value{font-size:13.5px;color:var(--wine);font-weight:500;}

/* ===== 11. MAPA ===== */
.map-block{
  margin:22px 0 0;
  border-top:1px solid var(--border);
}
.map-block iframe{display:block;width:100%;}

/* ===== RESPONSIVE ===== */
@media(min-width:480px){
  .card-wrap{padding:48px 16px;}
}
@media(min-width:768px){
  .card-wrap{padding:64px 16px;}
  .card{max-width:430px;}
}
@media(max-width:360px){
  .action-grid{gap:14px 4px;}
  .action-icon{width:48px;height:48px;}
  .card-main h1{font-size:1.3rem;}
}