:root{
  --ink:#f1f1f1;
  --muted:#cfd6e3;
  --border:rgba(255,255,255,.18);
  --panel-rgb:30,37,55;
  --card-alpha:.72;
  --card-border:rgba(255,255,255,.25);
  --card-shadow-color:rgba(0,0,0,.70);
  --card-shadow-y:20px;
  --card-shadow-blur:50px;
  --blur:10px;
  --radius:22px;
  --pill-radius:9999px;
  --maxw:520px;
  --btn-bg:rgba(255,255,255,.10);
  --btn-border:rgba(255,255,255,.22);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.24);
  --btn-hover-bg:rgba(0,0,0,.30);
  --btn-hover-border:rgba(255,255,255,.28);
  --bg-overlay:rgba(255,255,255,.00);
  --logo-bg:rgba(255,255,255,.1);
}

*{box-sizing:border-box}
html,body{min-height:100%;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:var(--ink);
  font:16px/1.6 "Roboto Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  letter-spacing:.2px;
  background:#0b1327;
  position:relative;
  overflow:auto;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    url("fondo.jpg") center/cover no-repeat;
  z-index:-2;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(40% 60% at 15% 10%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(40% 60% at 85% 15%, rgba(0,0,0,.18), transparent 60%);
  z-index:-1;
}

.card{
  width:min(100%, var(--maxw));
  border-radius:var(--radius);
  padding:38px 42px 36px;
  text-align:center;
  border:1px solid var(--card-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
    rgba(var(--panel-rgb), var(--card-alpha));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(120%);
  backdrop-filter:blur(var(--blur)) saturate(120%);
  box-shadow:0 var(--card-shadow-y) var(--card-shadow-blur) var(--card-shadow-color);
}

.logo{
  width:120px;
  height:120px;
  margin:0 auto 18px;
  border-radius:100px;
  overflow:hidden;
  border:8px solid var(--border);
  display:grid;
  place-items:center;
  background:var(--logo-bg);
}

.logo img{width:100%;height:100%;object-fit:contain;display:block}

.identity{margin:0 0 24px;}

h1{margin:.2rem 0 0;font-size:clamp(28px,5vw,34px);font-weight:700;line-height:1.12;}

.role-title{margin:8px 0 6px;color:#cfd6e3;font-size:clamp(20px,3.4vw,22px);font-weight:700;line-height:1.2;}

.company-name{margin:8px 0 8px;color:#d9d9d9;font-size:clamp(21px,4.2vw,25px);font-weight:700;line-height:1.15;}

.tagline{margin:10px 0 0;color:var(--muted);font-size:clamp(17px,3.5vw,19px);font-weight:400;line-height:1.25;}

.role-title:empty,
.company-name:empty,
.tagline:empty{display:none;}

.stack{display:flex;flex-direction:column;align-items:center;gap:16px;}

.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  border-radius:var(--pill-radius);
  color:var(--ink);
  text-decoration:none;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  box-shadow:var(--btn-shadow);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
  cursor:pointer;
  font-family:inherit;
  font-size:17px;
  font-weight:400;
  line-height:1.15;
  white-space:nowrap;
}

.btn:hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-border);transform:translateY(-1px);}

.btn span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;}

.btn i{
  width:20px;
  flex:0 0 20px;
  display:inline-grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  opacity:.95;
}

#waBtn i{font-size:25px;}

.contact-block{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-bottom:24px;}

.mail-btn{max-width:100%;}

.mail-btn span{white-space:nowrap;}

.map-block{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px;}

.map-icon{
  width:52px;
  height:52px;
  padding:0;
  border-radius:50%;
}

.map-address{
  margin:0;
  max-width:100%;
  color:var(--ink);
  font-size:17px;
  font-weight:400;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.identity-divider{
  width:90px;
  height:1px;
  margin:16px auto 16px;
  background:rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}

.contact-extra{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:0;margin-bottom:24px;}

.qr-title{margin:0;color:var(--muted);font-size:clamp(15px,3.2vw,17px);font-weight:700;line-height:1.25;text-align:center;}

.qr-box{
  width:min(180px,58vw);
  aspect-ratio:1/1;
  border-radius:16px;
  padding:10px;
  border:1px solid var(--btn-border);
  background:#fff;
  box-shadow:var(--btn-shadow);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.qr-box img{width:100%;height:100%;display:block;object-fit:contain;}

.contact-actions{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-bottom:28px;}

.contact-actions .btn{padding:11px 18px;}

.share-btn{font-family:inherit;font-size:17px;}

.socials{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:0;margin-bottom:28px;}

.sicon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--ink);
  text-decoration:none;
  box-shadow:var(--btn-shadow);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.sicon:hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-border);transform:translateY(-1px);}

.sicon i{font-size:18px;line-height:1;}

.footnote{
  margin-top:50px;
  font-size:10px;
  line-height:1;
  color:rgba(255,255,255,.65);
  letter-spacing:.3px;
  user-select:none;
}

.footnote img{
  width:70px;
  height:auto;
  display:block;
  margin:0 auto 8px;
  opacity:.9;
}

.footnote p{margin:0;}

@media (max-width:560px){
  body{padding:8px 6px;align-items:flex-start;}
  .card{width:calc(100vw - 12px);padding:32px 16px 28px;border-radius:18px;}
  .logo{width:104px;height:104px;border-width:7px;margin-bottom:18px;}
  h1{font-size:30px;}
  .role-title{font-size:18px;}
  .company-name{font-size:22px;}
  .tagline{font-size:17px;}
  .identity{margin-bottom:24px;}
  .contact-block{margin-bottom:24px;}
  .contact-extra{gap:18px;margin-bottom:24px;}
  .contact-actions{gap:14px;margin-bottom:28px;}

  .row{
    flex-direction:column;
    gap:16px;
  }

  .btn{padding:11px 15px;font-size:16px;gap:8px;}
  .btn i{font-size:18px;width:18px;flex-basis:18px;}
  #waBtn i{font-size:22px;}
  .mail-btn{font-size:16px;}
  .mail-btn span{max-width:250px;}
  .map-address{font-size:16px;max-width:96%;}
  .sicon{width:40px;height:40px;}
  .socials{gap:10px;}
}

@media (max-width:360px){
  .card{padding-left:12px;padding-right:12px;}
  .row{flex-direction:column;}
  .mail-btn span{max-width:220px;}
}

@media (max-height:850px) and (min-width:561px){
  body{align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}