:root{
  --bg:#0f172a; --card:#111827; --soft:#1f2937; --muted:#94a3b8;
  --txt:#e5e7eb; --brand:#38bdf8; --accent:#22c55e;
}

/* RESET */
*{box-sizing:border-box}
html, body{margin:0; height:100%}

/* Fondo: azul marino + (opcional) imagen océano */
body{
  font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--txt);
  line-height:1.6;
  min-height:100%;
  overflow-x:hidden;
  background-color:#0b1630; /* azul marino sólido */
  position:relative;
}
/* Imagen océano (pon assets/bg-ocean.jpg al lado de este CSS) */
body::before{
  content:"";
  position:fixed; inset:0;
  background: url("./bg-ocean.jpg") center/cover no-repeat;
  opacity:.28; filter:saturate(.9) brightness(.9);
  z-index:-1; pointer-events:none;
}
@media (max-width: 820px){ body::before{ position:absolute; } }

a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* LAYOUT */
.wrap{max-width:1100px; margin:40px auto; padding:0 20px}
.header{
  display:grid; gap:24px; align-items:center;
  grid-template-columns: 120px 1fr;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.avatar{
  width:120px;height:120px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(56,189,248,.45), transparent 60%),
    radial-gradient(60% 60% at 70% 70%, rgba(34,197,94,.45), transparent 60%),
    var(--soft);
  border:1px solid rgba(255,255,255,.08);
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-fallback{font-weight:800}

h1{margin:0; font-size: clamp(24px, 3.2vw, 40px); line-height:1.15}
.subtitle{color:var(--muted); font-weight:600; margin-top:6px}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  background:rgba(56,189,248,.10);
  color:#e0f2fe; border:1px solid rgba(56,189,248,.35);
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600
}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--txt); font-weight:600; transition:.2s transform ease; text-decoration:none
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
  background:linear-gradient(180deg, rgba(56,189,248,.25), rgba(56,189,248,.15));
  border-color:rgba(56,189,248,.45)
}

/* GRID de contenido */
.grid{display:grid; gap:20px; margin-top:24px; grid-template-columns: 1.1fr .9fr;}
.content{container-type:inline-size}

/* CARDS */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:20px; box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
}
.card h2{margin:0 0 10px; font-size: clamp(17px, 1.6vw, 20px)}

.kvs{display:grid; gap:6px}
.kv{display:flex; gap:10px}
.kv .k{min-width:130px; color:var(--muted)}

.list{display:grid; gap:14px; padding-left:18px}
.list li{margin:0}

.timeline{display:grid; gap:14px}
.job{
  padding:14px; border-radius:14px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06)
}
.job .when{color:var(--muted); font-size:13px}
.job .title{font-weight:700}

footer{margin:30px 0; color:var(--muted); text-align:center}
.tiny{font-size:12px}

/* Pills */
.pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); font-size:12px;
  transition: background 0.3s ease;
}
.pill:hover {
  background: rgba(255,255,255,.08);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  .header{grid-template-columns:100px 1fr; padding:18px}
  .avatar{width:100px; height:100px}
  .wrap{padding:0 16px}
}
@media (max-width: 680px){
  .header{grid-template-columns:1fr; text-align:center; gap:14px}
  .avatar{margin:0 auto}
  .actions{flex-direction:column}
  .actions .btn{width:100%; justify-content:center; padding:12px 16px}
  .card{padding:16px}
  .kv{flex-direction:column}
  .kv .k{min-width:unset; font-size:13px}
  .badge{margin:0 auto}
}
@media (max-width: 420px){
  h1{font-size: clamp(20px, 7vw, 26px)}
  .subtitle{font-size:14px}
  .btn{padding:10px 12px}
  .pill{font-size:11px; padding:5px 8px}
  .list{padding-left:16px}
}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* Mobile sticky nav */
.mobile-nav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 20px));
  display: none;
  background: rgba(17, 24, 39, .72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius: 16px;
  padding: 8px;
  z-index: 50;
}
.mobile-nav .mnav-link{
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  color: var(--txt);
  font-size: 11px;
  text-decoration: none;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.mobile-nav .mnav-link:hover{ transform: translateY(-1px) }
.mobile-nav .mnav-link.active{
  background: linear-gradient(180deg, rgba(56,189,248,.20), rgba(56,189,248,.10));
  border: 1px solid rgba(56,189,248,.35);
  color: #e0f2fe;
}
@media (max-width: 820px){
  .mobile-nav{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  body{ padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce){
  .mobile-nav .mnav-link{ transition: none }
}
.mobile-nav .mnav-link svg{ display:block }
.mobile-nav .mnav-link span{ line-height: 1; }

/* Anclas con margen para scroll suave */
section, aside{ scroll-margin-top: 16px; }

/* Impresión limpia (opcional) */
@media print{
  body::before{ display:none !important; }
  body{ background:white; color:#111; }
  .header, .card{ box-shadow:none; border:1px solid #eee; }
  a{ color:#0645ad; }
}