/* Importar tipografía moderna */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
body { 
  font-family: 'Poppins', sans-serif; 
  line-height:1.6; 
  background:#f0f2f5;
  color:#333;
}

/* Barra superior estilo navegador */
.topbar {
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; gap:8px;
  background:#1f3c88; color:#fff;
  padding:8px 14px; box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.topbar .dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.red{background:#ff4b5c;} 
.yellow{background:#ffc107;} 
.green{background:#28a745;}
.topbar .url{ font-size:0.9rem; color:#ddd; }

/* Encabezado con foto */
.encabezado {
  margin-top:60px; 
  display:flex; gap:20px; align-items:center;
  padding:20px; 
  background:#fff; 
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  max-width:1000px; margin-left:auto; margin-right:auto;
}
.foto-perfil { 
  width:180px; height:180px; border-radius:50%; 
  object-fit:cover; border:4px solid #1f3c88;
}
.redess { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.puesto { color:#1f3c88; margin:4px 0; font-weight:600; }
.contacto { list-style:none; color:#555; }

/* Layout principal */
.layout {
  display:flex; gap:20px;
  padding:20px;
  max-width:1200px; margin:0 auto;
}
.sidebar {
  flex:0 0 260px;
  position:sticky; top:80px;
  background:#fff; padding:18px; 
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.sidebar h2 { margin-bottom:10px; color:#1f3c88; font-size:1.2rem; }
.sidebar ul { margin-bottom:18px; list-style:disc inside; color:#444; }

.principal { flex:1; }
.principal h2 { margin:16px 0 8px; color:#1f3c88; }
.principal .meta { font-size:0.9rem; color:#777; }
.marcos { display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; }
.marcos figure { 
  flex:1; border-radius:8px; 
  background:#fff; padding:8px; 
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.marcos img { width:100%; height:160px; object-fit:cover; border-radius:6px; }

/* Pie de página */
.pie {
  text-align:center; padding:20px; 
  background:#1f3c88; color:#fff;
  margin-top:30px;
}
.redes { 
  list-style:none; display:flex; justify-content:center; 
  gap:15px; margin-bottom:10px; 
}
.redes li a { color:#fff; font-size:1.2rem; transition:0.3s; }
.redes li a:hover { color:#ffc107; }

/* Badge flotante */
.badge {
  position:absolute; bottom:20px; right:20px;
  background:#ff4b5c; color:#fff; 
  padding:8px 14px; border-radius:20px;
  font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.2);
}