:root{--primary:#0bb4f2;--primary-600:#0899cc;--ink:#1f2937;--muted:#6b7280;--bg:#f5f7fa;--card:#ffffff;--ring: rgba(11,180,242,0.35);--shadow: 0 10px 25px rgba(0,0,0,0.08);--radius:16px;}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';color:var(--ink);background: radial-gradient(1000px 600px at 50% -10%, #e8f8ff 0%, #f7fbff 40%, var(--bg) 100%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.page{ min-height:100%; display:grid; place-items:center; padding:32px 16px; }
.card{ width:100%; max-width:720px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; position:relative; overflow:hidden; }
/*.logo{ position:absolute; top:18px; right:18px; opacity:.9; }*/
.logo {
  display: block;
  margin: 0 auto 16px;   /* centrado arriba, con margen inferior */
  width: 100px;          /* más grande que el avatar */
  height: auto;
  opacity: 1;            /* más visible */
}
.card {
  width: 100%;
  max-width: 720px;
/*  background: var(--card) url("assets/logo.png") no-repeat center center;
  background-size: 70%;        /* controla el tamaño del logo */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.avatar {
  position: relative;
  z-index: 2;                  /* asegura que quede encima del fondo */
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
/*.avatar{ width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 12px; border:4px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,.10); }*/
.title{ margin:0; text-align:center; font-size:1.6rem; font-weight:800; }
.subtitle{ margin:6px 0 18px; text-align:center; color:var(--muted); }
.links{ display:grid; gap:12px; margin:0 auto 18px; max-width:560px; }
/*.btn{ display:flex; align-items:center; justify-content:space-between; gap:4px; text-decoration:none; color:#fff; background:linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%); padding:16px 18px; border-radius:12px; box-shadow:0 10px 18px var(--ring); border:1px solid rgba(255,255,255,.35); transition: transform .06s ease, box-shadow .2s ease; text-align: center;	 }*/
.btn {
  display: flex;
  flex-direction: column;     /* icono arriba, texto debajo */
  align-items: center;        /* centra horizontal */
  justify-content: center;    /* centra vertical */
  gap: 4px;                   /* espacio entre icono y texto */
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(11,180,242,0.35);
  border: 1px solid rgba(255,255,255,.35);
  transition: transform .06s ease, box-shadow .2s ease;
  text-align: center;         /* asegura centrado del texto */
}
.btn small {
  display: block;
  font-size: 12px;
  opacity: .95;
  text-align: center;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 12px 20px var(--ring);} .btn .icon{ font-size:20px; line-height:1 } .btn small{ display:block; font-size:12px; opacity:.95 }
.highlight{ margin:12px auto 18px; padding:16px; border-radius:12px; background:#f0f9ff; border:1px dashed #b6e8ff; max-width:560px; }
.highlight h2{ margin:.2rem 0 .3rem; font-size:1rem } .highlight p{ margin:.2rem 0 .7rem; color:#0b527a }
.highlight-cta{ display:inline-block; text-decoration:none; background:#0b8ec2; color:#fff; padding:10px 14px; border-radius:10px; }

/* Mini cards directory */
.team-mini{ margin:10px auto 4px; max-width:680px; }
.team-mini h2{ font-size:1.05rem; margin:0 0 10px; }
.mini-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
.mini-card{ display:grid; justify-items:center; gap:6px; background:#ffffff; border:1px solid #e6f3ff; border-radius:14px; padding:10px; box-shadow:0 2px 8px rgba(11,180,242,.10); }
.mini-avatar{ width:72px; height:72px; border-radius:9999px; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.mini-name{ font-size:.9rem; text-align:center; color:#0b3550; font-weight:700; min-height:2.2em; }
.mini-actions{ display:flex; gap:6px; }
.mini-btn{ display:inline-block; font-size:.8rem; padding:6px 10px; border-radius:999px; text-decoration:none; background:#eef8ff; color:#0b4d71; border:1px solid #cdefff; }
.mini-btn.wa{ background:#25D366; border-color:#20b457; color:#fff; }

.footer{ display:grid; place-items:center; gap:8px; margin-top:8px; color:#6b7280; font-size:.9rem; } .copy{ appearance:none; border:none; background:#eef6ff; color:#0b4d71; padding:10px 12px; border-radius:10px; cursor:pointer; border:1px solid #d7ebff; }

@media (prefers-color-scheme: dark){
  :root{ --ink:#e5e7eb; --muted:#cbd5e1; --bg:#0b1220; --card:#0f172a; --ring: rgba(14,165,233,.3); --shadow: 0 10px 25px rgba(2,6,23,.6); }
  body{ background: radial-gradient(900px 600px at 50% -10%, #001a27 0%, #030617 45%, var(--bg) 100%) }
  .logo{ opacity:.8 } .btn{ border-color: rgba(255,255,255,.12) } .highlight{ background:#001828; border-color:#083f56 } .highlight p{ color:#b6e8ff }
  .mini-card{ background:#0b1220; border-color:#0b2742; }
  .mini-name{ color:#bfe6ff; }
  .mini-btn{ background:#041524; color:#b6e8ff; border-color:#083f56 }
}