/* Variables (mobile-first) */
:root{
  --bg: #ffffff;
  --text: #0a1420;
  --accent: #76A72B;   /* link_text_color original */
  --btn: #C1DA9A;      /* button_color original */
  --card-bg: #ffffff;
  --card-border: #e9edef;
  --muted: #64748b;
  --radius: 14px;
  --space: 16px;
  --space-lg: 20px;
}

/* Reset + mejor tacto en móvil */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Contenedor principal: 100% móvil */
.page {
  width: 100%;
  max-width: 100%;
  padding: calc(var(--space) + 4px) var(--space) var(--space-lg);
}

/* Perfil */
.profile { text-align: center; }
.avatar {
  width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; display: inline-block; margin-bottom: 12px;
}
.title { font-size: 1.9rem; margin: 0 0 6px; font-weight: 800; }
.description { font-size: 1rem; color: var(--muted); margin: 0; }

/* Botones grandes y táctiles (100% width) */
.cta { margin-top: 12px; display: grid; gap: 10px; }
.btn {
  display: inline-block; width: 100%;
  min-height: 48px; line-height: 48px; text-align: center;
  padding: 0 14px; border-radius: var(--radius);
  background: var(--btn); color: #0b1b07; text-decoration: none;
  font-weight: 700; letter-spacing: 0.2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.05) inset;
  transition: transform .1s ease, filter .1s ease;
}
.btn:active { transform: scale(.99); filter: brightness(.95); }
.btn-block { display: block; }

/* Redes en grid 2 columnas (móvil) */
.social { margin-top: 12px; }
.social-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.social-grid a{
  display: block; width: 100%; text-align: center;
  padding: 10px 8px; border-radius: 10px; text-decoration: none;
  background: #f4f7f5; color: var(--text); font-weight: 600;
}
.social-grid a:active{ transform: scale(.99); }

/* Tarjetas full-width */
.links { margin-top: 18px; display: grid; gap: 12px; }
.card {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center;
  padding: 12px; border-radius: var(--radius);
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  text-decoration: none; color: var(--text);
  min-height: 72px;
}
.card:active { transform: scale(.995); }
.card-icon {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--accent); display: grid; place-items: center;
  font-size: 26px; color: #fff;
}
.card-title { margin: 0 0 2px; font-size: 1.02rem; font-weight: 800; }
.card-desc { margin: 0; font-size: .92rem; color: var(--muted); }

/* Footer compacto */
.footer { margin-top: 24px; text-align: center; color: var(--muted); font-size: .9rem; }

/* Dark mode nativo (móvil) */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --text: #e6edf3;
    --card-bg: #0f141a;
    --card-border: #1f2a36;
    --muted: #9ab;
    --btn: #3c5430;
    --accent: #5f8f24;
  }
  a { color: #d4e157; }
}